1

カスタム ディレクティブで指定されたテンプレートを含むビューがあります。カスタム ディレクティブで使用されるテンプレートは、「dynamicTemplate」に依存します。

意見：

<div ng-controller="MyController">
    <custom-dir dynamicTemplate="dynamicTemplateType"></custom-dir>
    <button ng-click="ok()">Ok</button>
</div>

ビューのコントローラー:

 myModule
    .controller('MyController', ['$scope', function ($scope) {
        $scope.dynamicTemplateType= 'input';
        $scope.myValue = "";
        $scope.ok = function()
        {
           // Problem! Here I check for 'myValue' but it is never updated!
        }

カスタム ディレクティブ:

 myModule.directive("customDir", function ($compile) {

    var inputTemplate = '<input ng-model="$parent.myValue"></input>';
    var getTemplate = function (templateType) {
        // Some logic to return one of several possible templates 
        if( templateType == 'input' )
        {
          return inputTemplate;
        }
    }

    var linker = function (scope, element, attrs) {
         scope.$watch('dynamicTemplate', function (val) {
            element.html(getTemplate(scope.dynamicTemplate)).show();
        });

        $compile(element.contents())(scope);
    }

    return {
        restrict: 'AEC',
        link: linker,
        scope: {
            dynamicTemplate: '='
        }
    }
});

上記の例では、MyController にある 'myValue' をカスタム ディレクティブにあるテンプレートにバインドしたいのですが、そうはなりません。

動的テンプレート (つまり、ディレクティブのリンカーのコンテンツ) を削除し、代わりにハードコーディングされたテンプレートを返すと、バインディングが正常に機能することに気付きました。

 // If directive is changed to the following then binding works as desired
 // but it is no longer a dynamic template:
 return {
            restrict: 'AEC',
            link: linker,
            scope: {
                dynamicTemplate: '='
            },
            template: '<input ng-model="$parent.myValue"></input>'
        }

これがダイナミック テンプレートで機能しない理由がわかりません。

AngularJS 1.3.0 を使用しています。

4

2 に答える 2

0

js ディレクティブ:

angular.module('directive')
.directive('myDirective', function ($compile) {

  var tpl1 ='<div class="template1">{{data.title}}</div>';
  var tpl2 ='<div class="template2">Hi</div>';

  var getTemplate = function (data) {
    if (data.title == 'hello') {
      template = tpl1;
    }
    else {
      template = tpl2;
    }
    return template;
  };

  var linker = function (scope, element, attrs, ngModelCtrl) {

    ngModelCtrl.$render = function () {

    // wait for data from the ng-model, particulary if you are loading the data from an http request
      if (scope.data != null) {
        element.html(getTemplate(scope.data));
        $compile(element.contents())(scope);
      }
    };

  };

  return {
    restrict: "E",
    require: 'ngModel',
    link: linker,
    scope: {
    data: '=ngModel'
    }
  };

});

html :

  <my-directive
    ng-model="myData">
  </my-directive>

js コントローラー:

$scope.myData = {title:'hello'};
于 2016-10-01T17:58:21.487 に答える
0

dynamicTemplate だけでなく、その値をディレクティブ スコープに渡す必要があるかもしれません。

ここでディレクティブ スコープについて良い答えがあります: AngularJS で *独自のスコープを持つカスタム ディレクティブ内から親スコープにアクセスする方法は?

私がお役に立てば幸いです。

于 2015-01-12T17:55:08.427 に答える