问题描述
我在我的控制器名称函数,如 enableEditor 这是工作,如果我直接HTML即调用函数(添加)。但是,如果我调用该函数为其通过指令即(编辑)创建的元素是行不通的。请看看我的code,如果任何想法指点我。
<!DOCTYPE HTML>
< HTML LANG =ENNG-应用=对myApp>
< HEAD>
<间的charset =UTF-8>
<标题物实施例 - 例如,example53生产< /标题>
<脚本SRC =JS / angular.min.js>< / SCRIPT>
< /头>
<机身NG控制器=MainCtrl>
< DIV用户名=>< / DIV>
< DIV>
< A HREF =#NG点击=enableEditor()>添加< / A>
< / DIV>
<脚本>VAR对myApp = angular.module('对myApp',[]); myApp.controller('MainCtrl',['$范围,$过滤',函数($范围,$过滤器){
$ scope.enableEditor =功能(){
警报(123);
};
}]);
myApp.directive(username的,函数(){
返回{
限制:A,
范围: {
值:=用户名
},
模板:'< DIV CLASS =点击编辑>' +
'< A HREF =#NG点击=enableEditor()>编辑< / A>' +
'< / DIV>'
};
});
< / SCRIPT>
< /身体GT;
< / HTML>
既然你有一个孤立的范围功能属于指令不是你的控制器的范围。尝试使用&安培;
在你的指令范围如下:
<机身NG控制器=MainCtrl>
< DIV用户名=呼我=enableEditor()>< / DIV>
< DIV>
< A HREF =#NG点击=enableEditor()>添加< / A>
< / DIV>
<脚本>VAR对myApp = angular.module('对myApp',[]); myApp.controller('MainCtrl',['$范围,$过滤',函数($范围,$过滤器){
$ scope.enableEditor =功能(){
警报(123);
};
}]);
myApp.directive(username的,函数(){
返回{
限制:A,
范围: {
值:=用户名,
呼我:&放大器;
},
模板:'< DIV CLASS =点击编辑>' +
'< A HREF =#NG点击=呼我()>编辑< / A>' +
'< / DIV>'
};
});
属性呼我=enableEditor()
用于该方法传递到范围的指令,该指令范围使用&安培;
来表明它是方法呼我:&放大器;
。又如:
方法2 =的someMethod()
像
范围:{
值:=用户名,
呼我:&放大器;,
方法2:与&
},模板:'< DIV CLASS =点击编辑>' +'< A HREF =#NG点击=呼我()>编辑< / A>' +'< A HREF =#NG点击=方法2()>保存< / A>' +'< / DIV>'
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>'
这篇关于如何访问与隔离范围指令的控制器功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!