Блог

Главная - Вопросы по программированию - AngularJS — Пользовательская директива ng-click не работает (внешний шаблон с ng-repeat)

AngularJS — Пользовательская директива ng-click не работает (внешний шаблон с ng-repeat)

#javascript #html #angularjs #angularjs-directive #angularjs-ng-repeat

#javascript #HTML #angularjs #angularjs-директива #angularjs-ng-repeat

Вопрос:

у меня проблема с моим кодом AngularJS, в настоящее время я пытаюсь заполнить свою боковую <li>s панель тем, что есть <a>s внутри, с помощью ng-click для вызова функции внутри контроллера.

Итак, проблема в том, что после того, как я успешно загружаю директиву, ng-click внутри этой директивы не работает.

Я новичок в Angular, поэтому прошу прощения, если я допустил какую-либо глупую ошибку.

Итак, мой HTML:

 <body ng-Controller="myController as ctrl">
  <ul class="nav nav-sidebar">
    <sidebar-items recieved-items="ctrl.recievedSidebar" item-click="ctrl.getItems(amp;quot;{{ctrl.recievedSidebar.name}}amp;quot;)">
    </sidebar-items>
  </ul>
</body>

Мое угловое приложение:

 (function () {
'use strict';

angular.module('myApp', [])
.controller('myController', myController)
.service('getItemsService', getItemsService)
.directive('foundItems', FoundItemsDirective)
.directive('sidebarItems', SideBarItemsDirective)

myController.$inject = ['getItemsService'];
function myController(getItemsService) {
  var ctrl = this;
  ctrl.title = "title";
  ctrl.recieved = undefined;
  ctrl.getItems = function (jsonFile) {    
    getItemsService.getItems(jsonFile)
    .then(function (result) {
      if (jsonFile == "Collections"){
        ctrl.recievedSidebar = result.Collections;
      }else {
        ctrl.recieved = result.links;
        ctrl.title = "Title"
      }
    })
    .catch(function(error) {
      console.log("Something went wrong!!! Error code = "   error);
    });

  }
  ctrl.getItems("Collections");
  ctrl.notRecieved = function () {
    if (ctrl.recieved == undefined) {
      return false;
    }
    return ctrl.recieved.length == 0;
  }


}


getItemsService.$inject = ['$http'];
function getItemsService($http) {
  var service = this;
  service.getItems = function(jsonFile) {
    return $http({
      method: "GET",
      url: ("json/"   jsonFile   ".json"),
      cache: true
    }).then(function(response){
      return response.data;
    });
  }
}


function FoundItemsDirective() {
  var ddo = {
        restrict: 'E',
        templateUrl: 'directiveTemplates/foundItemsDirective.html',
        scope: {
            items: '<recievedItems'
        },
        controller: DirectiveController,
        controllerAs: 'dirCtrl',
        bindToController: true,
        transclude: true
        };
    return ddo;
  };


function DirectiveController() {

}

function SideBarItemsDirective() {
  var ddo = {
    restrict: 'E',
    templateUrl: 'directiveTemplates/sideBarDirectiveTemplate.html',
    scope: {
      items: '<recievedItems',
      itemClick: 'amp;'
    },
    controller: SideBarDirectiveController,
    controllerAs: 'dirCtrl',
    bindToController: true,
    transclude: true
    };
    return ddo;
  }
function SideBarDirectiveController() {

}

})();

И мой шаблон директивы:

 <li ng-repeat="item in dirCtrl.items">
  <a href="" ng-click="ctrl.getItems(amp;quot;{{item.name}}amp;quot;)">{{item.label}}</a>
</li>

Заранее спасибо.

Комментарии:

1. В вашем выражении ng-click с помощью ctrl.GetItems() вы можете просто передать item.name прямо как этот ctrl.GetItems(item.name )