1

** 更新 : **
ここに私の問題を示す plnkr があります。
https://plnkr.co/edit/3U7MHlJw0gcEdwT4e64r?p=preview
何か間違ったことをしていると確信しています。

ラベル、入力、および ng-messages を含む再利用可能な要素ディレクティブを構築しています。属性のデータはすべて、$http サービスを使用して取得した Json オブジェクトに格納されます。

最後に、ラベル、入力属性、および ng-model で機能する動的データを取得しました。ng-messages、ng-messages-include は機能していますが...

ng-messages-exp で動作させることができません。

これを説明するのに役立つと思われるコードを次に示します。

JSON:

[
    {
        "inputsContact" : [
            { 
                "labelText" : "test Name",
                "labelId" : "testname",
                "labelName" : "testname",
                "inputId" : "testname",
                "inputName" : "testname",
                "placeholder" : "Enter your name",
                "model" : "testname",
                "type" : "text",
                "required" : "true",
                "messageDirty" : "jiraForm.testname.$dirty",
                "messageError" : "jiraForm.testname.$error",
                "messageInclude" : "app/views/partials/messages/messages-error-text.html"
            }
        ]
    }
]

サービス：

.factory('BuildInputService', ['$http',  function($http) {
    return {
        getInputs: function( callback ) {
            $http.get('app/data/input-creation-data.json')
            .then(function(response) {
                callback( response );
            });
        }
    };
}])

Html ディレクティブ要素:

<text-input-comp input-data="testName" model-data="ticketData[testName.model]" message-data="errorMessages" message-dirty="jiraForm[testname].$dirty" message-error="jiraForm[testname].$error" message-include-url="testName[messageInclude]" class="input-group form-group"></text-input-comp>

--- ticketData は作成したフォームデータです

指令コード:

.directive('textInputComp', [ '$compile', function($compile){
  return {
    restrict: 'E',
    require: 'territoryController',
    scope: {
      inputData: '=',
      modelData: '=',
      messageData: '=messageData',
      messageDirty: '=messageDirty',
      messageError: '=messageError',
      messageIncludeUrl: '=messageIncludeUrl'
    },
    templateUrl: '/app/views/partials/components/textInputComp.html'
  }
}]);

ディレクティブで使用されるテンプレート: (バックエンドとして Laravel を使用しているため、 {{ }} を <% %> に置き換えました)

<label name="<% inputData.labelName %>" id="<% inputData.labelId %>" for="" class="control-label label-top" > <% inputData.labelText %> </label> 
<input name="<% inputData.inputName %>" id="<% inputData.inputId %>" class="form-control" type="text" ng-model="modelData" placeholder="<% inputData.placeholder %>" asteriskcheck ng-required="<% inputData.required %>"/> 
<div ng-messages="messageDirty" class="error-list" role="alert">
    <div ng-messages-include src="<% inputData.messageInclude %>"></div>
</div>

これは ng-messages-include で使用されるテンプレートです

<div ng-repeat="errorMessage in messageData[0].text">
    <p ng-message-exp="errorMessage.type">
         <% errorMessage.text %>
    </p>
</div>

これは動作を停止する場所です。ng-repeat は要素を生成していますが、ng-message-exp は私が試したものでは動作しません。

誰にもこれに対する解決策はありますか?? 私は何を間違っていますか？

どうもありがとう

4

0 に答える 0