Question

我的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(&quot;{{ctrl.recievedSidebar.name}}&quot;)">
    </sidebar-items>
  </ul>
</body>

我的 Angular app 是：

(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: '&'
    },
    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(&quot;{{item.name}}&quot;)">{{item.label}}</a>
</li>

提前致谢。

AngularJS - 自定义指令ng-click不起作用（带有ng-repeat的外部模板）

0 个答案: