AngularJS:动态编译指令模板时的正确范围绑定(bind)

Question

给定

指令 D1 应用于元素 E

指令 D1 被传递一个包含指令 D2

的模板

指令 D2 订阅了 ngModel 更新

指令 D1 使用指令 D2

编译模板

指令 D1 和 D2 被认为是相互独立的

指令 D1 和 D2 具有独立的范围

(指令 D1 可能与 DOM 分离，但保留在内存中)

客观的

使指令 D2 对元素 E 的范围更改使用react，并对其应用 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);

fiddle

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

例子

D1 是一个弹出窗口小部件，可以配置为插入 HTML 作为其内容。
D2 是一个 QR 码小部件，用于监视模型和更改更新。

问题

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

Answer 1

scope: { model: '=ngModel' },
这将绑定(bind)属性 model到属性 ng-model 中定义的属性的 inner 元素，因为您以元素的形式使用指令。您的 inner元素没有这样的属性。

但即使有，第二个问题是 inner 的父范围是 outer 的范围，这也是一个隔离范围。 someValue在 Controller 的范围内定义，所以 inner没有机会直接与 someValue 建立绑定(bind)，无论您选择何种绑定(bind)类型。

解决方案取决于您的具体需求。见 this fiddle一种可能的解决方案。