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

Question

我有以下 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 中有关？

Answer 1

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>