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

【问题标题】：Custom directive with dynamic template and binding parent scope to ng-model具有动态模板并将父范围绑定到 ng-model 的自定义指令
【发布时间】：2015-01-12 08:06:47
【问题描述】：

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

【问题讨论】：

标签： angularjs angularjs-directive isolate-scope

【解决方案1】：

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

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

希望我能有所帮助。

【讨论】：

请在此处包含任何相关代码。链接会随着时间而变化，如果确实如此，此答案将不会起作用。
对不起，我在 stackoverflow 中迈出了第一步。我会努力改进我的答案。谢谢。

【解决方案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'};

【讨论】：