AngularJS - 传递函数给指令

14 浏览
0 Comments

AngularJS - 传递函数给指令

我有一个AngularJS的例子:


 


当我点击按钮时,弹出框应该出现,但是什么都没有显示。有人可以帮助我吗?

0
0 Comments

在你的'test'指令的HTML标签中,函数的属性名称不应该使用驼峰命名法,而应该使用破折号分隔。

所以,不应该写成:

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

而应该写成:

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

这是AngularJS区分指令属性(如update-fn函数)和函数的方式。

感谢你的发现。我已经在我的回答中包含了这一点。已投票支持! 🙂

0
0 Comments

AngularJS - 传递函数给指令的问题

在一个孤立作用域的指令内部调用父级作用域中的控制器函数,可以像OP所说的那样在HTML中使用dash-separated属性名称。

同时,如果你想要向函数传递参数,在调用函数时传递一个对象:

<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: '&'
        },
        // 通过对象进行调用
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

感谢Codezilla的回答,我想问一下,当我想要将父级作用域中的函数"updateFn"绑定到指令"test"的孤立作用域中时,是否可能?

replace属性在AngularJS中已被弃用:stackoverflow.com/questions/24194972/…

由于某种原因,参数对我来说是未定义的。

我认为参数只有在再次调用该方法时才被使用?第一个开括号的使用似乎是angular希望方法只被传递的格式,但我可能是错的

是的,这比我的解决方案更好,也更清晰

如果还有其他人想知道这些东西的工作原理以及为什么指令必须与父级作用域紧密耦合(实际上它们并不是),请阅读这篇文章:sidewaysforward.com/2013/05/20/…

我不明白这是如何工作的。为什么要以参数名作为键传递一个对象?这是Angular特有的行为吗?

在指令的link函数中进行函数调用时,必须使用updateFn({msg: 'my message'});这种格式的对象映射。

难道只有我一个人完全懵逼,无法理解,主要是因为这个解决方案中到处都使用了相同的名称“updateFn”吗?有人能改进一下这个答案吗?区分名称会帮助很多。

0
0 Comments

AngularJS - 传递函数给指令

在上面的代码中,虽然其他的解决方案确实调用了父作用域的函数,但是无法从指令代码中传递参数,这是因为update-fn用固定的参数调用updateFn(),例如{msg: "Hello World"}。稍作修改即可允许指令传递参数,我认为这更有用。

HTML中传递了一个函数引用,即不带()的括号。

在上述代码中,HTML调用本地作用域的callUpdate函数,然后从父作用域中“获取”updateFn并调用返回的带有指令生成参数的函数。

在上面的代码中,HTML调用本地作用域callUpdate函数,该函数然后从父作用域中“获取”updateFn并调用返回的带有指令生成参数的函数。

请注意,上述提到的解决方案会更改this作用域。所以,如果您使用controllerAs并将包含this.something的函数传递给指令,那么从指令中调用它将无法按预期工作。

我认为您需要在指令的返回对象中添加controller: 'testCtrl'

我不明白为什么要做“获取”部分。我在HTML模板中带着括号my-func="'vm.myFunction()"传递函数,而不在子组件的控制器中“获取”任何东西,它就在子模板中正常工作。这可能是控制器和指令之间的微妙差别吗?

您还可以使用scope.updateFn('msg':'The actual message that you want to pass to the controller');来代替scope.updateFn()("Directive Args");

0