具有隔离范围的角度自定义指令不触发ng-click功能

Question

我有以下 Angular 自定义指令代码：

模板(审查标准.html)

<div class="review-standard" ng-repeat="standard in standards">
<button ng-click="mark(standard)">Mark Complete</button>
</div>

.JS

app.directive("reviewStandards", function ($parse, $state) {
return {
restrict: "A",
templateUrl: function (elements, attrs) {
return "/Scripts/App/Directives/Templates/ReviewStandards.html";
},
transclude: false,
scope: {
standards: "="
},
replace: true,
link: function (scope, elem, attrs) {
scope.mark = function (standard) {
alert();
};
}
};
});

该指令用作：

<div review-standards standards="review.ReviewStandards"></div>

其中standards只是一个standard对象的 JSON 数组。

问题是单击按钮时ng-click不会触发函数。 范围是孤立的 - 这是否与此有关或按钮在ng-repeat中的事实？

Answer 1

试试这个，"我只是从你的代码中删除替换">

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.data = [{
name: "a"
},
{
name: "b"
}
];
});
app.directive("reviewStandards", function() {
var template = "<div class="review-standard">" +
"<div ng-repeat="standard in standards">" +
"{{standard.name}} " +
"<button ng-click="mark(standard)">Mark Complete</button>" +
"<div><hr>" +
"</div>";
return {
restrict: "A",
transclude: false,
template: template,
scope: {
standards: "="
},
link: function(scope, elem, attrs) {
scope.mark = function(standard) {
console.log(standard)
};
}
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div review-standards standards="data"></div>
</div>

Answer 2

我会尝试解释为什么会发生这种情况。

使用replace：true时的范围继承问题，并且在模板中只有一个带有ng-repeat的元素。

如果replace：false，模板粘贴到带有指令的元素中，所以你会得到这样的东西

<div review-standards standards="review.ReviewStandards"> <!-- here isolated scope from review-standards directive -->
<div class="review-standard" ng-repeat="standard in standards"> <!-- here child scope created with ng-repeat -->
<button ng-click="mark(standard)">Mark Complete</button>
</div>
</div>

因此，ng-repeat创建的子作用域继承自独立作用域评审标准指令，子作用域中可用的独立作用域中的所有属性。

当使用替换时：true，模板用指令替换元素，si 你会得到这样的东西

<div class="review-standard" ng-repeat="standard in standards" review-standards standards="review.ReviewStandards"> <!-- here child scope created with ng-repeat -->
<button ng-click="mark(standard)">Mark Complete</button>
</div>

在这种情况下最有趣的是，现在子作用域继承自ng-controller，但$parent属性设置到隔离的范围审查标准指令。因此，在子作用域中，所有属性都可用于ng控制器作用域，但不能从隔离作用域审查标准指令中获得。

最简单的解决方案方法，如附近的答案所示，只需删除替换：true

另一种方式：稍微改变模板，像这样

<div>
<div class="review-standard" ng-repeat="standard in standards">
<button ng-click="mark(standard)">Mark Complete</button>
</div>
</div>

或者有点丑陋的解决方案：使用$parent属性而不是希望继承

<div class="review-standard" ng-repeat="standard in $parent.standards">
<button ng-click="$parent.mark(standard)">Mark Complete</button>
</div>