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

也许您应该将该值传递到您的指令范围中，而不仅仅是动态模板，我认为它应该可以工作。

您在此处对指令范围有一个很好的答案：如何在 AngularJS 中从自定义指令 *with own scope* 中访问父范围？

希望我有任何帮助。

于 2015-01-12T17:55:08.427 回答
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 回答