Angularjs 1.4.4 и ng-click не работают для части кнопки ng-repeat и ее внутри директивы

0

Я использую Angularjs 1.4.4, и как-то ng-click не работает для кнопки. кнопка является частью 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.

Пожалуйста помоги.

Теги:

1 ответ

2
Лучший ответ

Вам нужно удалить 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);
      };
    }
  };
}]);
Поделиться
  • 0
    Сладкий сюрприз, это сработало :-) Но любопытно, изменилось ли это в версии 1.4.4?
  • 0
    Должен ли я удалить «replace = true» из всех директив, которые я использую в моем проекте?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню