我有这个html页面:
<div class="row" ng-controller="HomeController as home">
<section class="tile-column large-2 columns" ng-repeat="container in home.menu" id="{{ container.id }}" tile-column>
<h1 class="column-title" ng-bind="container.name"></h1>
<a class="tile {{ tile.classes }}" href="{{ tile.action }}" id="{{ tile.id }}" tile="{{ tile.colour }}" ng-repeat="tile in container.tiles">
<i class="fa {{ tile.icon }}"></i>
<span class="title">{{ tile.name }}</span>
</a>
</section>
</div>
主控制器如下所示:
// ---
// CONTROLLERS.
// ---
.controller('HomeController', ['Menu', function (menu) {
var self = this;
self.menu = menu.current;
}])
// ---
// SERVICES.
// ---
.factory('MenuService', function () {
var get = function () {
return [{
id: 'items',
name: 'Items',
tiles: [{
id: 'customer-services',
name: 'Customer services',
action: '/customer-services',
icon: 'fa-arrow-circle-down',
classes: 'x-large',
colour: 'pink'
}, {
id: 'distribution',
name: 'Distribution',
action: '/distribution',
icon: 'fa-arrow-circle-down',
colour: '#000000'
}, {
id: 'compaints',
name: 'Complaints',
action: '/complaints',
icon: 'fa-arrow-circle-down',
colour: ''
}, {
id: 'sampling',
name: 'Sampling',
action: '/sampling',
icon: 'fa-arrow-circle-down',
colour: ''
}, {
id: 'manufacturing',
name: 'Manufacturing',
action: '/manufacturing',
icon: 'fa-arrow-circle-down',
colour: ''
}, {
id: 'warehousing',
name: 'Warehousing',
action: '/warehousing',
icon: 'fa-arrow-circle-down',
colour: ''
}, {
id: 'finance',
name: 'Finance',
action: '/finance',
icon: 'fa-arrow-circle-down',
colour: ''
}]
}, {
id: 'configuration',
name: 'Configuration',
tiles: [{
id: 'profile',
name: 'Profile',
action: '/security/profile',
icon: 'fa-arrow-circle-down',
colour: ''
}, {
id: 'signout',
name: 'Sign out',
action: '/security/logout',
icon: 'fa-arrow-circle-down',
colour: ''
}]
}];
};
return {
get: get
};
})
// ---
// MODELS.
// ---
.factory('Menu', ['MenuService', function (service) {
var get = function () {
if (Modernizr.localstorage) { // If we have local storage
var items = angular.fromJson(localStorage['items']); // Try to get our menu items
if (items) // If we have a result
return items; // Return our items
}
return service.get(); // Otherwise return our default
};
var save = function (menu) {
if (Modernizr.localstorage) { // If we have local storage
localStorage['items'] = angular.toJson(menu); // Store this class
current = get(); // Get the latest changes
}
}
var current = get();
return {
current: current,
save: save
};
}]);
如您所见,磁贴在模型中具有类。我想做的是有一个可以检查每个磁贴的类的指令。我目前已设置:
.directive('xLarge', function () {
return {
restrict: 'C',
link: function (scope, element, attr) {
console.log('this should work on an extra large tile');
}
}
})
我希望开火一次,但它永远不会被击中。谁能想到我将如何让这个指令发挥作用?
您可以使用自定义元素来执行此操作,而不是按类绑定指令:
http://plnkr.co/edit/fLBb8GqKCFLekBLHTokX?p=preview
<div class="row" ng-controller="HomeController as home">
<section class="tile-column large-2 columns" ng-repeat="container in home.menu" id="{{ container.id }}" tile-column="">
<h1 class="column-title" ng-bind="container.name"></h1>
<test tile="tile" ng-repeat="tile in container.tiles">
<a class="tile {{ tile.classes }}" tile="{{ tile.colour }}" id="{{ tile.id }}" href="{{ tile.action }}">
<i class="fa {{ tile.icon }}"></i>
<span class="title">{{ tile.name }}</span>
</a>
</test>
</section>
</div>
示例指令:
.directive('test', function () {
return {
restrict: 'E',
scope: {
tile: '=tile'
},
link: function (scope, element, attr) {
console.log('this should work on an extra large tile');
console.log(scope.tile);
}
}
})