Question

我有一个包含自定义指令中指定的模板的视图。 custom指令中使用的模板取决于'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。

Answer 1

也许你应该将这个值传递给你的指令范围，而不是只传递给dynamicTemplate，我认为它应该有效。

您对指令范围有一个很好的答案：How to access parent scope from within a custom directive *with own scope* in AngularJS?

希望我有任何帮助。

Answer 2

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'};

具有动态模板和绑定父范围的自定义指令到ng-model

2 个答案: