问题描述
我创建了一个指令。
angular.module('app')
.directive('navtree', function (service) {
return {
restrict: 'A',
scope: {},
link: function (scope, el) {
scope.loadNavtree = function(){
service.data()
.then(function (data) {
///Do something
});
}
scope.loadNavtree();
}
};
});
从我的控制器，我可以使用
$scope.$parent.$$childHead.loadNavtree();
尽管这是可行的，但我认为这不是正确的方法。 我想了解从这样的控制器访问指令中定义的功能的缺点。
我看了这个但无法追踪
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
/// How to call takeTablet() available in directive from here?
});
app.directive('focusin', function factory() {
return {
restrict: 'E',
replace: true,
template: '<div>A:{{internalControl}}</div>',
scope: {
control: '='
},
link : function (scope, element, attrs) {
scope.takeTablet = function() {
alert('from directive');//
}
}
};
});
1楼
这不是正确的方法，因为angular不建议使用其私有变量来访问指令函数，因此您需要获得一种好的方法来执行此操作，这是从控制器访问指令函数的示例。
如果要使用隔离作用域，则可以使用控制器作用域中变量的bi-directional绑定('=')传递控制对象。
这样，您还可以控制页面上同一指令的多个实例。
控制器/指令：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.focusinControl = {
};
});
app.directive('focusin', function factory() {
return {
restrict: 'E',
replace: true,
template: '<div>A:{{internalControl}}</div>',
scope: {
control: '='
},
link : function (scope, element, attrs) {
scope.internalControl = scope.control || {};
scope.internalControl.takenTablets = 0;
scope.internalControl.takeTablet = function() {
scope.internalControl.takenTablets += 1;
}
}
};
});
HTML：
<button ng-click="focusinControl.takeTablet()">Call directive function</button>
<h4>In controller scope:</h4>
{{focusinControl}}
<h4>In directive scope:</h4>
<focusin control="focusinControl"></focusin>
<h4>Without control object:</h4>
<focusin></focusin>