AngularJS：动态编译指令模板时适当的范围绑定

Question

鉴于

• 指令D1应用于元素E
• 指令D1传递包含指令D2
的模板
• 指令D2订阅 ngModel 更新
• 指令D1使用指令D2
编译模板
• 指令D1和D2被认为是彼此独立的
• 指令D1和D2具有隔离的范围
• （指令D1可能与DOM分离，但保留在内存中）

目的

• make指令D2对元素E的范围更改做出反应，并将D1应用于它

---

的index.html

<div ng-app="myApp" ng-controller="MainCtrl">
<label>
    <u>model: </u>
    <input type="text" ng-model="someValue" outer="tmpl.html"/>
    <hr/>
</label>

<script type="text/ng-template" id="tmpl.html">
    <inner test="123"></inner>
</script>

<script src="angular.js"></script>

---

app.js

(function (ng) {

var app = ng.module('myApp', []);

app.controller('MainCtrl', [
    '$scope',
    function ($scope) {
        $scope.someValue = 'Hello, World!';
    }
])
// directive D2
.directive('inner', function () {
    return {
        restrict: 'AE',
        replace: true,
        template: '<p>{{model || "N/A"}}</p>',
        scope: { model: '=ngModel' },
        link: function (scope, element, attrs) {
            scope.$watch('model', function (newValue, oldValue) {
                if (!ng.isDefined(oldValue) && !ng.isDefined(newValue)) {
                  return;
                }
                // do stuff...
            });
        }
    };
})
// directive D1
.directive('outer', [
    '$templateCache',
    '$compile',
    function ($templateCache, $compile) {
        return {
            restrict: 'AE',
            scope: {},
            link: function (scope, element, attrs) {
                var template = $templateCache.get(attrs.outer);
                var compiled = $compile(template)(scope);
                element.parent().append(compiled);
            }
      };
    }
]);

})(angular);

小提琴

这里有一个过于简化的版本：http://jsfiddle.net/Nscp8/12/

实施例

D1 是一个弹出窗口小部件，可以配置为插入HTML作为其内容。 D2 是一个QR码代码小部件，可以观察模型并更新更新。

问题

ngModel绑定未正确完成，我没有从中获取更新。我在这里做错了什么？

Answer 1

scope: { model: '=ngModel' },

这会将属性model绑定到 ng-model 元素的属性inner中定义的属性，因为您以元素的形式使用该指令。您的inner元素没有此类属性。

但即使它有，第二个问题是inner的父范围是outer的范围，它也是一个孤立的范围。 someValue在控制器范围内定义，因此无论您选择哪种绑定类型，inner都无法直接与someValue建立绑定。

解决方案取决于您的具体需求。有关一种可能的解决方案，请参阅this fiddle。