这里的目标是让两个不同的指令在技术上是同级共享功能。我要么使用一个,要么使用另一个,永远不要在中使用一个。
然而,第二个指令将具有第一个指令的所有功能,并添加一些小的内容。因此,我希望功能从"Parent"指令继承到"Child"。
我通过在Child上重新使用Parent中的相同指令定义对象来实现这一点,但控制器/模板字段被更改了。
这一切都很顺利,直到我从ParentDirCtrl
中找到了观察者。出于某种原因,观察者似乎正确地设置了观察mydir.obj1
,但不知何故,在观察者回调函数mydir.obj1
内部变得未定义。
我假设_.extend
/$controller
会改变$scope
的工作方式,因此mydir.obj1
不会在ParentDirCtrl
中定义,但我不确定为什么会出现这种情况。
Plunk
angular.module('plunker', [])
// lodash
.constant('_', _)
.controller('MainCtrl', function($scope, $timeout) {
$scope.obj = {
name: 'John',
age: 30,
};
})
.controller('ParentDirCtrl', function($scope) {
var mydir = this;
mydir.doStuffInParent = function() {
alert('executed from the parent directive');
}
$scope.$watch('mydir.obj1', function() {
// ====================================
// ERROR
// Why is 'mydir.obj1' undefined when
// occupation is set?
// ====================================
mydir.obj1.occupation = 'Meteorologist';
});
})
.directive('parentDirective', parentDirective)
.directive('childDirective', function() {
// borrow the directive definition object from the parent directive
var parentDDO = parentDirective();
// uodate the template and controller for our new directive
parentDDO.template = [
'<div>',
'<p ng-click="mydir.doStuffInParent()">{{mydir.obj1.name}}</p>',
'<p ng-click="mydir.doStuffInChild()">{{mydir.obj1.age}}</p>',
'</div>'
].join('');
parentDDO.controller = function($scope, $controller, _) {
// extend 'this' with the Parent's controller
var mydir = _.extend(this, $controller('ParentDirCtrl', { $scope: $scope }));
mydir.doStuffInChild = function() {
alert("executed from the child directive");
};
};
return parentDDO;
});
// this will be moved to the top during declaration hoisting
function parentDirective() {
return {
restrict:'E',
scope: {},
bindToController: {
obj1: '=',
},
template: '<div>{{mydir.obj1}}</div>',
controller: 'ParentDirCtrl',
controllerAs: 'mydir',
};
}
obj1
填充在子控制器实例上-这就是为什么mydir.obj1
在父观察程序中未定义的原因。您可以通过作用域直接访问obj1
,也可以使用传递给观察者的引用:
$scope.$watch('mydir.obj1', function(val) {
$scope.mydir.obj1.occupation = 'Meteorologist';
// or
val.occupation = 'Meteorologis';
});
这里没有作用域继承——两个控制器都在同一个作用域上操作Controller AS语法会让你感到困惑——为了让事情更清楚,我会去掉它。