                        课程
                    
                        /前端开发
                        
                            /Angular
                        
                        /AngularJS实战

第三种绑定函数换成第一种传入不同函数名后在link中定义不同函数可以吗以及区别？

&绑定用于传递父scope函数，也就是说调用了controller的函数。我想其实可以从外部传入所要调用的函数名，然后函数在指令里面的link中定义不是也可以吗？但是我写的代码并没有运行成功，请大家看看代码有什么错？以及请问这种同一指令调用不同函数到底是写到控制器里面好还是写到指令里好，以及为什么？谢谢

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="myAppCtrl">
            <xingoo pd="sayHello"></xingoo>
            <xingoo pd="sayNo"></xingoo>
            <xingoo pd="sayYes"></xingoo>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);
            myAppModule.directive("xingoo",function(){
                return {
                    restrict:'AE',
                    scope:{
                        say:'@pd'
                    },
                    template:'<input type="text" ng-model="username"/><br>'+
                        '<button ng-click="{{ say }}({name:username})">click</button><br>',
                    repalce:true
                    link : function(scope, element, attrs) {
                        $scope.sayHello = function(name){
                            console.log("hello !"+ name);
                        };
                        $scope.sayNo = function(name){
                            console.log("no !"+ name);
                        };
                        $scope.sayYes = function(name){
                            console.log("yes !"+ name);
                        };
                    }
                }
            })
        </script>
    </body>
</html>

billiepander

2016-06-10

源自：AngularJS实战 2-11

关注问题我要回答

750

操作

收起

1 回答

gw_iron 回答被采纳 +3 积分
2016-06-11

我也是初学，希望意见给你邮用：

首先你的在页面中写了 controller 但是函数那边却未定义，这里会报错
link : function(scope, element, attrs) {
$scope.sayHello = function(name){ //这边的写变量名字的时候写 scope，用却多了一个 $所以报错
<button ng-click="{{ say }}({name:username})">click</button><br>中的 ng-click="{{ say }}({name:username})" 这个 say 是个字符串还可以这样调用函数的吗？我试了不行耶
同样我也碰到的问题希望你也帮我看看
1. link : function(scope, element, attrs) {
2. console.log(scope);我从外部绑定进来的 say 这样打印出来有 scope.say
3. console.log(scope.say); ///但是这里却 undefined
下面我上我的代码

<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<xingoo pd="sayHello"></xingoo>
<xingoo pd="sayNo"></xingoo>
<xingoo pd="sayYes"></xingoo>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[])
.controller( 'myAppCtrl',[ '$scope', function ($scope) {
} ] );
myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{
say:'@pd'
},
template:'<input type="text" ng-model="username"/><br>'+
'<button ng-click="fnSay(username)">{{ say }}</button><br>',
repalce:true,
link : function(scope, element, attrs) {
console.log(scope);
console.log(scope.say);
scope.fnSay = function (name) {
if(!name){
name = '';
}
scope[scope.say](name);
};
scope.sayHello = function(name){
console.log("hello !"+ name);
};
scope.sayNo = function(name){
console.log("no !"+ name);
};
scope.sayYes = function(name){
console.log("yes !"+ name);
};
}
}
});
</script>
</body>
</html>