如何访问与隔离范围指令的控制器功能？ [英] How to access a controller function in directives with isolated scope?
问题描述
我在我的控制器名称函数，如 enableEditor 这是工作，如果我直接HTML即调用函数（添加）。但是，如果我调用该函数为其通过指令即（编辑）创建的元素是行不通的。请看看我的code，如果任何想法指点我。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题物实施例 - 例如，example53生产＆LT; /标题＆GT;
＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=MainCtrl＆GT;
＆LT; DIV用户名=＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; A HREF =＃NG点击=enableEditor（）＆gt;添加＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT;VAR对myApp = angular.module（'对myApp'，[]）; myApp.controller（'MainCtrl'，['$范围，$过滤'，函数（$范围，$过滤器）{
$ scope.enableEditor =功能（）{
警报（123）;
};
}]）;
myApp.directive（username的，函数（）{
返回{
限制：A，
范围： {
值：=用户名
}，
模板：'＆LT; DIV CLASS =点击编辑＆GT;' +
'＆LT; A HREF =＃NG点击=enableEditor（）＆gt;编辑＆LT; / A＆GT;' +
'＆LT; / DIV＆GT;'
};
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
既然你有一个孤立的范围功能属于指令不是你的控制器的范围。尝试使用＆安培; 在你的指令范围如下：
＆LT;机身NG控制器=MainCtrl＆GT;
＆LT; DIV用户名=呼我=enableEditor（）＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; A HREF =＃NG点击=enableEditor（）＆gt;添加＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT;VAR对myApp = angular.module（'对myApp'，[]）; myApp.controller（'MainCtrl'，['$范围，$过滤'，函数（$范围，$过滤器）{
$ scope.enableEditor =功能（）{
警报（123）;
};
}]）;
myApp.directive（username的，函数（）{
返回{
限制：A，
范围： {
值：=用户名，
呼我：＆放大器;
}，
模板：'＆LT; DIV CLASS =点击编辑＆GT;' +
'＆LT; A HREF =＃NG点击=呼我（）＆gt;编辑＆LT; / A＆GT;' +
'＆LT; / DIV＆GT;'
};
}）;
属性呼我=enableEditor（）用于该方法传递到范围的指令，该指令范围使用＆安培; 来表明它是方法呼我：＆放大器;。又如：
方法2 =的someMethod（）像
范围：{
值：=用户名，
呼我：＆放大器;，
方法2：与＆amp;
}，模板：'＆LT; DIV CLASS =点击编辑＆GT;' +'＆LT; A HREF =＃NG点击=呼我（）＆gt;编辑＆LT; / A＆GT;' +'＆LT; A HREF =＃NG点击=方法2（）＆GT;保存＆LT; / A＆GT;' +'＆LT; / DIV＆GT;'
I have a function in my controller name as enableEditor it is working if i call the function from direct HTML i.e(add). But, if I call the function for a element which is created through the directives i.e(edit) is not working. Please look at my code and advice me if any ideas.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div user-name=""></div>
<div>
<a href="#" ng-click="enableEditor()">add</a>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {
$scope.enableEditor = function() {
alert("123");
};
}]);
myApp.directive("userName", function() {
return {
restrict: "A",
scope: {
value: "=userName"
},
template: '<div class="click-to-edit">' +
'<a href="#" ng-click="enableEditor()">Edit</a>' +
'</div>'
};
});
</script>
</body>
</html>
Since you have an isolated scope the function belongs to the scope of the directive not your controller. Try using & in your directives scope like this:
<body ng-controller="MainCtrl">
<div user-name="" callme="enableEditor()"></div>
<div>
<a href="#" ng-click="enableEditor()">add</a>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {
$scope.enableEditor = function() {
alert("123");
};
}]);
myApp.directive("userName", function() {
return {
restrict: "A",
scope: {
value: "=userName",
callme:"&"
},
template: '<div class="click-to-edit">' +
'<a href="#" ng-click="callme()">Edit</a>' +
'</div>'
};
});
The attribute callme="enableEditor()" is used to pass the method to the scope directive, the directive scope uses & to indicate it is method callme:"&". Another example:
method2="someMethod()" like
scope: {
value: "=userName",
callme:"&",
method2:"&"
},template: '<div class="click-to-edit">' + '<a href="#" ng-click="callme()">Edit</a>' + '<a href="#" ng-click="Method2()">Save</a>' + '</div>'
这篇关于如何访问与隔离范围指令的控制器功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
