我的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("{{ctrl.recievedSidebar.name}}")">
</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("{{item.name}}")">{{item.label}}</a>
</li>
提前致谢。