我有以下 Angular 自定义指令代码:
模板 (ReviewStandards.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
中有关?
最佳答案
Try This, "i just remove the Replace from your codes"
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>
关于javascript - 具有隔离范围的 Angular 自定义指令不触发 ng-click 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37937280/