AngularJS控制器和指令范围问题

过去几天我一直在继续研究angularjs,尤其是关于指令。AngularJS控制器和指令范围问题

我有一个场景,我必须加载一个记录列表,每个记录属于一个类别(5个类别在下拉选择框中)。我已经创建了一个指令来处理它们中的每一个的“更改”事件,并使它们的范围不重叠。正如您在控制台日志中所看到的,每次从下拉列表中选择一个项目时,它都是独立于其他项目的。

我有两个问题:

  1. 如何从外部资源只有一次加载的类别。到 更具体一些,我只想调用 practiceFactory.getCategories()一次。

  2. 是我的代码结构在正确的轨道方面?

这里是我的html:

<div data-ng-app="practiceApp"> 

<h1>practiceAppController</h1>

<div data-ng-controller="practiceAppController">

<p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p>

<p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p>

<p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p>

<p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p>

<p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p>

</div>

</div>

这里是我的JS:

var practiceApp = angular.module('practiceApp', []); 

practiceApp.controller('practiceAppController', function($scope, practiceFactory) {

});

practiceApp.factory('practiceFactory', function() {

var factory = {};

factory.getCategories = function() { // async call here

console.log('getCategories() was called');

var categories = [

{id: 1, name: 'Food & Dining'},

{id: 2, name: 'Hotel & Travel'},

{id: 3, name: 'Shopping'},

{id: 4, name: 'Health & Beauty'},

{id: 5, name: 'Activities'}

];

return categories;

}

factory.getSelectedCategory = function() { // async call here

console.log('getSelectedCategory() was called');

var selectedCategoryId = Math.floor((Math.random()*5)+1);

return selectedCategoryId;

}

return factory;

});

practiceApp.directive('whenChanged', function(practiceFactory) {

return {

restrict: 'A',

scope: {},

controller: function ($scope) {

$scope.selectedCategoryId = practiceFactory.getSelectedCategory();

$scope.categories = practiceFactory.getCategories();

$scope.saveCategory = function(categoryId) {

console.log(categoryId);

}

},

link: function(scope, element, attribute) {

element.bind('change', function() {

scope.$apply(attribute.whenChanged);

})

}

}

});

这里是一个的jsfiddle。 http://jsfiddle.net/j45fN/

回答:

要倒退为您解答...

在回答#2,我不建议使用工厂在你的指令来加载数据。这种逻辑应该发生在你的模块的控制器中(不在任何指令的控制器中)。在这方面,其他工厂电话也应该从您的指令中删除。

如果你这样做,它使#1更容易 - 你可以简单地在practiceAppController调用practiceFactory.getCategories一次,并使用结果传递给你的指令的范围双向绑定(scope: { categories: '=' })。

以上是 AngularJS控制器和指令范围问题 的全部内容, 来源链接: utcz.com/qa/257394.html

回到顶部