为了账号安全,请及时绑定邮箱和手机立即绑定

AngularJS-将函数传递给指令

/ 猿问

AngularJS-将函数传递给指令

慕莱坞5435954 2019-10-08 10:48:50

我有一个angularJS示例


<div ng-controller="testCtrl">


<test color1="color1" updateFn="updateFn()"></test>

</div>

 <script>

  angular.module('dr', [])

.controller("testCtrl", function($scope) {

    $scope.color1 = "color";

    $scope.updateFn = function() {

        alert('123');

    }

})

.directive('test', function() {

    return {

        restrict: 'E',

        scope: {color1: '=',

                updateFn: '&'},

        template: "<button ng-click='updateFn()'>Click</button>",

        replace: true,

        link: function(scope, elm, attrs) { 

        }

    }

});


</script>

</body>


</html>

我想要当我单击按钮时,将出现警报框,但什么也没显示。


谁能帮我?


查看完整描述

3 回答

?
达令说

要从隔离作用域指令内部在父作用域中调用控制器功能,请dash-separated在HTML中使用属性名称,如OP所述。


另外,如果要向函数发送参数,请通过传递对象来调用函数:


<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);


app.controller("testCtrl", function($scope) {

    $scope.color1 = "color";

    $scope.updateFn = function(msg) {        

        alert(msg);

    }

});


app.directive('test', function() {

    return {

        restrict: 'E',

        scope: {

            color1: '=',

            updateFn: '&'

        },

        // object is passed while making the call

        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>

            Click</button>",

        replace: true,        

        link: function(scope, elm, attrs) {             

        }

    }

});


查看完整回答
反对 2019-10-08
?
大话西游666

也许我缺少了一些东西,但是尽管其他解决方案确实调用了父作用域函数,但无法从指令代码传递参数,这是因为,例如,使用固定参数进行update-fn调用。稍作更改即可使指令传递参数,我认为这会有用得多。updateFn(){msg: "Hello World"}


<test color1="color1" update-fn="updateFn"></test>

请注意,HTML正在传递函数引用,即不带()括号。


JS


var app = angular.module('dr', []);


app.controller("testCtrl", function($scope) {

    $scope.color1 = "color";

    $scope.updateFn = function(msg) {        

        alert(msg);

    }

});


app.directive('test', function() {

    return {

        restrict: 'E',

        scope: {

            color1: '=',

            updateFn: '&'

        },

        // object is passed while making the call

        template: "<button ng-click='callUpdate()'>

            Click</button>",

        replace: true,        

        link: function(scope, elm, attrs) {       

          scope.callUpdate = function() {

            scope.updateFn()("Directive Args");

          }

        }

    }

});

因此,在上面的代码中,HTML调用了本地作用域callUpdate函数,该函数随后从父作用域“获取” updateFn,并使用指令可以生成的参数调用返回的函数。


http://jsfiddle.net/mygknek2/


查看完整回答
反对 2019-10-08
?
largeQ

在“测试”指令Html标记中,函数的属性名称不应为驼峰式,而应基于破折号。


所以-代替:


<test color1="color1" updateFn="updateFn()"></test>

写:


<test color1="color1" update-fn="updateFn()"></test>

这是angular区分指令属性(例如update-fn函数)和函数之间差异的方法。


查看完整回答
反对 2019-10-08

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信