Angularjs 1.4.4和ng-click對ng-repeat的按鈕部分及其指令內部不起作用

Question

我正在使用Angularjs 1.4.4，並且ng-click不適用於按鈕。 button是ng-repeat的一部分，它位於指令內部。 請使用plnkr代碼作為參考

以下是指令js的代碼詳細信息：

app.directive("accordion", [function() {
  return {
    restrict: "E",
    scope: {
      cities: '='
    },
    templateUrl: "Accordion.html",
    replace: true,
    link: function($scope, element, attrs) {

      $scope.clickToGetCityName = function(name) {
        alert("Welcome to city " + name);
      };


    }
  };
}]);

指令html：

 <div data-ng-repeat="city in cities">
    <div>
        <button  data-ng-click="clickToGetCityName(city.name)" data-ng-bind-template="{{city.name}}"></button>       
    </div>
</div>

控制器代碼：

var app = angular.module("Test", ['ngResource', 'ngRoute', "ngSanitize", "ngAnimate"]);
app.controller('CityViewController', ['$scope', function($scope) {

  $scope.cities = [{
    "name": "Hackansack"
  }, {
    "name": "Phoenix"
  }, {
    "name": "New York City"
  }, {
    "name": "Tempe"
  }];

}]);

index.html代碼：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <!-- Angular JS  -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-sanitize.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>

  <script src="script.js"></script>
</head>

<body data-ng-app="Test" data-ng-controller="CityViewController">
  <h1>City View!</h1>
  <accordion data-cities="cities"></accordion>
</body>

</html>

請注意; 我保留了所有angularjs文件，因為我在項目中遇到了這個問題，並且我正在使用所有這些angularjs模塊。

請幫忙。

Answer 1

您需要刪除replace: true因此您的指令應為：

app.directive("accordion", [function() {
  return {
    restrict: "E",
    scope: {
      cities: '='
    },
    templateUrl: "Accordion.html",
    link: function($scope, element, attrs) {

      $scope.clickToGetCityName = function(name) {
        alert("Welcome to city " + name);
      };
    }
  };
}]);

Angularjs 1.4.4和ng-click對ng-repeat的按鈕部分及其指令內部不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2015-08-23 07:07:56

Angularjs 1.4.4和ng-click對ng-repeat的按鈕部分及其指令內部不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2015-08-23 07:07:56

解決方案1
2 已采納 2015-08-23 07:07:56