使用在父作用域中创建的函数以及AngularJS指令中的本地作用域变量和模板

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

我举的一个例子可以在 我的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>  

{{问候语}
点击我2

我的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>'
    };
});

var myapp=angular.module（'myapp'，[]）；
myapp.controller（'mycontroller'，['$scope'，函数（$scope）{
$scope.greeting='Hola！'；
$scope.dosomething=函数（什么）{
警惕（什么）；
};
}]);
//工作
myapp.directive（'xyz'，function（）{
返回{
模板：“单击我1”
};
});
//不起作用
myapp.指令（'abc'，函数（）{
返回{
模板：“单击我3”
};
});

我做了3个元素。前两个显示A.在没有指令的情况下，单击工作。B.不使用“dosomething”功能的指令也有效

试图将参数传递给“abc”指令并调用函数的第三个元素失败

---

如何传递参数并使用函数？谢谢。

这样的指令应该有独立的作用域，所以它可以在任何地方使用。 这是引入两个参数的简单指令：func和param

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

app.directive（'pit'，function（）{
返回{
范围：{
func:“=”，
参数：'='
},
模板：“单击我3”
};
});

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

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

我的笨蛋：

---

好吧，如果您查看控制台，您将看到一个错误，该错误显示了这不起作用的原因：

错误：未定义属性

您试图访问一个不存在的

attr

变量

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

scope: {
    mytext: '@'
}

这意味着现在指令的范围中将有一个

mytext

变量

但是，这会产生一个问题，因为使用

scope:{}

选项会为指令创建一个隔离作用域，这意味着封闭控制器的作用域不是指令作用域的一部分

如果可行，这里的干净方法也是将

剂量测量

函数作为指令的参数传递：

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

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

---

回答得很好。我甚至没有后续问题。谢谢

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