特定
>指令D1应用于元素E.
>指令D1传递包含指令D2的模板
>指令D2订阅了ngModel更新
>指令D1使用指令D2编译模板
>指令D1和D2被认为是彼此独立的
>指令D1和D2具有隔离范围
>(指令D1可能与DOM分离,但保留在内存中)
目的
> make指令D2对应用了D1的元素E的范围变化作出反应
的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: {},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绑定未正确完成,我没有从中获取更新.我在这做错了什么？
