0

ここ数日、特にディレクティブについて、angularjs の研究を続けています。

レコードのリストをロードする必要があるシナリオがあり、それぞれがカテゴリ (ドロップダウン選択ボックスに 5 つのカテゴリ) に属しています。それぞれの「変更」イベントを処理するディレクティブを作成し、スコープが重複しないようにしました。コンソール ログでわかるように、ドロップダウンからアイテムを選択するたびに、他のアイテムから独立しています。

2 つの質問があります。

  1. 外部リソースからカテゴリを 1 回だけ読み込むにはどうすればよいですか。具体的には、 practiceFactory.getCategories() を 1 回だけ呼び出したいと考えています。

  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/

4

1 に答える 1

0

あなたの質問に逆に答えるつもりです...

＃2への対応として、ファクトリを使用してディレクティブにデータをロードすることはお勧めしません。そのようなロジックは、モジュールのコントローラーで実行する必要があります (ディレクティブのコントローラーではありません)。その点で、他のファクトリ呼び出しもディレクティブから削除する必要があります。

これを行うと、#1 が簡単になります。practiceFactory.getCategories一度呼び出すだけでpracticeAppController、双方向バインディング ( scope: { categories: '=' }) を使用してディレクティブのスコープに結果を渡すことができます。

于 2013-05-26T18:53:30.710 に答える