1

私は AngularJS の controllerAs 構文に慣れてきましたが、サービス変数への単純なバインディングを行う必要があるときに問題が発生しました。通常、$scope.$watchor$scope.$onはそうしますが、それには を注入する必要があり$scope、controllerAs の目的を無効にしているようです。

現在私が持っているのは、ボタンの1つをクリックして を呼び出したconfig.setAttribute(attr)後、コントローラーはサービスのsetAttribute関数を呼び出しますが、 は呼び出さないgetAttributeため、config.attribute変更されません。

私がこれにどのように取り組んでいるのか、私が見落としているものはありますか? 代わり$scopeに使用するコントローラー構文を挿入または変更する必要がありますか?$scope

意見：

<div data-ng-controller="ConfigCtrl as config">
    <h3>Customize</h3>
    <pre>Current attribute: {{config.attribute}}</pre>

    <label>Attributes</label>
    <div data-ng-repeat="attr in config.attributes">
        <button ng-click="config.setAttribute(attr)">{{attr.name}}</button>
    </div>
</div>

サービス：

(function() {
'use strict';

angular.module('app')
.factory('Customization', Customization);

function Customization() {
    var service = {
        attribute: null,
        getAttributes: getAttributes,
        setAttribute: setAttribute,
        getAttribute: getAttribute
    }
    return service;
    /////
    function getAttributes() {
        return [
            {name: 'Attr1', value: '1'},
            {name: 'Attr2', value: '2'} // etc.
        ];
    }

    function setAttribute(attr) {
        service.attribute = attr;
    }

    function getAttribute() {
        return service.attribute;
    }
}})();

コントローラ：

(function(){
'use strict';

angular.module('app')
.controller('ConfigCtrl', ConfigCtrl);

function ConfigCtrl(Customization){
    var vm = this;

    vm.attribute = Customization.getAttribute(); // bind
    vm.attributes = [];

    // Functions
    vm.setAttribute = Customization.setAttribute;

    init();
    /////
    function init(){
        // Get attributes array
        vm.attributes = Customization.getAttributes();
    }
}})();
4

1 に答える 1

0

$scopeの監視を注入して追加した後のコントローラーの外観は次のattributeとおりです。

(function(){
'use strict';

angular.module('app')
.controller('ConfigCtrl', ConfigCtrl);

function ConfigCtrl($scope, Customization){
    var vm = this;

    vm.attribute;
    vm.attributes = [];

    // Functions
    vm.setAttribute = Customization.setAttribute;

    init();
    /////
    function init(){
        // Get attributes array
        vm.attributes = Customization.getAttributes();
    }

    $scope.$watch(function() {
        return Customization.getAttribute()
    }, function() {
        vm.attribute = Customization.getAttribute();
    });

}})();

誰かが興味を持っている場合に備えて、カルマ テストもあります。

(function() {
    'use strict';

    describe('ConfigCtrl', function () {

        var ConfigCtrl, scope;

        beforeEach(module('app'));

        beforeEach(inject(function($rootScope, $controller) {
            scope = $rootScope.$new();
            ConfigCtrl = $controller('ConfigCtrl',
                {$scope: scope}
            );
        }));

        describe('#setAttribute', function(){
            it('sets the current attribute', function(){
                var selected = {
                    name:'Attr1',
                    value:'1'
                };
                ConfigCtrl.setAttribute(selected);
                scope.$apply();
                expect(ConfigCtrl.attribute).to.eql(selected);
            });
        });
    });
})();

助けてくれてありがとう。他の誰かが持っているかもしれないより良い答えを歓迎します。

于 2015-08-09T00:52:44.030 に答える