Question

所以我正在尝试创建一个指令，它将用HTML替换一个元素，其中包含一个调用$ scope中创建的函数的ng-click。

我可以在http://jsfiddle.net/adinas/wbfu9ox3/5/找到我做的一个例子我的HTML是

<div ng-app="myapp" ng-controller="mycontroller">
{{greeting}}

<!--This works-->
<div xyz></div>

<!--This works-->
<div ng-click="dosomething('Click me 2')">Click me 2</div>

<!--The click added in the directive here does NOT work-->
<div abc mytext="Click me 3"></div>

我的JS是

var myapp = angular.module('myapp',[]);
myapp.controller('mycontroller', ['$scope', function($scope) {
$scope.greeting = 'Hola!';

$scope.dosomething = function (what) {
    alert(what);
};
}]);
//Works
myapp.directive('xyz', function () {
    return {
        template: '<div ng-click="dosomething(\'Click me 1\')">Click me 1</div>'
    };
});
//Does not work
myapp.directive('abc', function () {
    return {
        template: '<div ng-click="dosomething(\''+attr.mytext+'\')">Click me 3</div>'
    };
});

我制作了3个元素。前两个显示A.没有指令点击工作。 B.没有使用＆＃39; dosomething＆＃39;功能也有效。

试图将参数传递给＆＃39; abc＆＃39;指令并且还调用函数失败。

我怎样才能传递参数并使用该功能？感谢。

Answer 1

此类指令应具有独立的范围，因此可以在任何地方使用。这是引入两个参数的简单指令：func和param。

app.directive('pit', function () {
    return {
        scope : {
          func: '=',
          param: '='
        },
        template: '<button ng-click="func(param)">Click me 3</button>'
    };
});

这就是你在html中使用它的方式：

<div pit func="test1" param="test2"></div>

我的傻瓜： http://plnkr.co/edit/YiEWchRPwX6W7bohV3Zo?p=preview

Answer 2

好吧，如果你查看控制台，你会看到一个错误，显示为什么这不起作用：

错误：未定义attr

您正在尝试访问不存在的attr变量。

在指令模板中包含属性值的方法是将它们包含在指令的范围内：

scope: {
    mytext: '@'
}

这意味着指令范围内现在会有一个mytext变量。

然而，这会产生一个问题，因为使用scope: {}选项会为指令创建一个隔离范围，这意味着封闭控制器的范围不是指令的一部分＆＃39;范围。

如果可行，这里干净的方法是将dosomething函数作为指令的参数传递：

<div abc mytext="Click me 3" action='dosomething'></div>  

return {
    template: '<div ng-click="action(mytext)">Click me 3</div>',
    scope: {
        mytext: '@',
        action: '='
    }
};

http://jsfiddle.net/jx1hgjnr/1/

但如果那不是您想要做的并且您真的想要从父作用域访问dosomething，那么您可以做的一件事就是使用$parent.dosomething：

return {
    template: '<div ng-click="$parent.dosomething(mytext)">Click me 3</div>',
    scope: {
        mytext: '@'
    }
};

http://jsfiddle.net/c815sqpn/1/

使用在父作用域中创建的函数以及不带模板的AngularJS指令中的局部作用域变量

2 个答案: