AngularJS
Dyrektywy używające ngModelController

Prosta kontrola: ocena

Zbudujmy prostą kontrolkę, widget oceniający, który ma być używany jako:

<rating min="0" max="5" nullifier="true" ng-model="data.rating"></rating>

Na razie brak wymyślnego CSS; byłoby to renderowane jako:

0 1 2 3 4 5 x

Kliknięcie liczby wybiera tę ocenę; a kliknięcie „x” ustawia ocenę na zero.

app.directive('rating', function() {

    function RatingController() {
        this._ngModel = null;
        this.rating = null;
        this.options = null;
        this.min = typeof this.min === 'number' ? this.min : 1;
        this.max = typeof this.max === 'number' ? this.max : 5;
    }
    
    RatingController.prototype.setNgModel = function(ngModel) {
        this._ngModel = ngModel;
        
        if( ngModel ) {
            // KEY POINT 1
            ngModel.$render = this._render.bind(this);
        }
    };
    
    RatingController.prototype._render = function() {
        this.rating = this._ngModel.$viewValue != null ? this._ngModel.$viewValue : -Number.MAX_VALUE;
    };
    
    RatingController.prototype._calculateOptions = function() {
        if( this.min == null || this.max == null ) {
            this.options = [];
        }
        else {
            this.options = new Array(this.max - this.min + 1);
            for( var i=0; i < this.options.length; i++ ) {
                this.options[i] = this.min + i;
            }
        }
    };
    
    RatingController.prototype.setValue = function(val) {
        this.rating = val;
        // KEY POINT 2
        this._ngModel.$setViewValue(val);
    };
    
    // KEY POINT 3
    Object.defineProperty(RatingController.prototype, 'min', {
        get: function() {
            return this._min;
        },
        set: function(val) {
            this._min = val;
            this._calculateOptions();
        }
    });
    
    Object.defineProperty(RatingController.prototype, 'max', {
        get: function() {
            return this._max;
        },
        set: function(val) {
            this._max = val;
            this._calculateOptions();
        }
    });
    
    return {
        restrict: 'E',
        scope: {
            // KEY POINT 3
            min: '<?',
            max: '<?',
            nullifier: '<?'
        },
        bindToController: true,
        controllerAs: 'ctrl',
        controller: RatingController,
        require: ['rating', 'ngModel'],
        link: function(scope, elem, attrs, ctrls) {
            ctrls[0].setNgModel(ctrls[1]);
        },
        template:
            '<span ng-repeat="o in ctrl.options" href="#" class="rating-option" ng-class="{\'rating-option-active\': o <= ctrl.rating}" ng-click="ctrl.setValue(o)">{{ o }}</span>' +
            '<span ng-if="ctrl.nullifier" ng-click="ctrl.setValue(null)" class="rating-nullifier">&#10006;</span>'
    };
});

Kluczowe punkty:

1. Zaimplementuj ngModel.$render aby przenieść wartość widoku modelu do twojego widoku.
2. Wywołaj ngModel.$setViewValue() ilekroć uważasz, że wartość widoku powinna zostać zaktualizowana.
3. Sterowanie można oczywiście sparametryzować; użyj parametrów zakresu '<' dla parametrów, jeśli w Angular> = 1,5, aby wyraźnie wskazać dane wejściowe - wiązanie jednokierunkowe. Jeśli musisz podjąć działanie za każdym razem, gdy zmienia się parametr, możesz użyć właściwości JavaScript (zobacz Object.defineProperty() ), aby zapisać kilka zegarków.

Uwaga 1: Aby nie ctrl.options implementacji, wartości oceny są wstawiane do tablicy - ctrl.options . To nie jest potrzebne; bardziej wydajna, ale także bardziej złożona implementacja może wykorzystywać manipulację DOM do wstawiania / usuwania ocen przy zmianie min / max .

Uwaga 2: Z wyjątkiem powiązań zakresu '<' , ten przykład może być użyty w Angular <1.5. Jeśli używasz Angular> = 1,5, dobrym pomysłem byłoby przeformułowanie tego do komponentu i użycie haka cyklu życia $onInit() do zainicjowania wartości min i max , zamiast robić to w konstruktorze kontrolera.

I niezbędne skrzypce: https://jsfiddle.net/h81mgxma/

Kilka skomplikowanych elementów sterujących: edycja pełnego obiektu

Kontrola niestandardowa nie musi się ograniczać do prostych rzeczy, takich jak prymitywy; może edytować bardziej interesujące rzeczy. Prezentujemy tutaj dwa typy niestandardowych kontrolek, jeden do edycji osób i jeden do edycji adresów. Kontrola adresu służy do edycji adresu osoby. Przykładem użycia może być:

<input-person ng-model="data.thePerson"></input-person>
<input-address ng-model="data.thePerson.address"></input-address>

Model tego przykładu jest celowo uproszczony:

function Person(data) {
  data = data || {};
  this.name = data.name;
  this.address = data.address ? new Address(data.address) : null;
}

function Address(data) {
  data = data || {};
  this.street = data.street;
  this.number = data.number;
}

Edytor adresów:

app.directive('inputAddress', function() {

    InputAddressController.$inject = ['$scope'];
    function InputAddressController($scope) {
        this.$scope = $scope;
        this._ngModel = null;
        this.value = null;
        this._unwatch = angular.noop;
    }

    InputAddressController.prototype.setNgModel = function(ngModel) {
        this._ngModel = ngModel;
        
        if( ngModel ) {
            // KEY POINT 3
            ngModel.$render = this._render.bind(this);
        }
    };
    
    InputAddressController.prototype._makeWatch = function() {
        // KEY POINT 1
        this._unwatch = this.$scope.$watchCollection(
            (function() {
                return this.value;
            }).bind(this),
            (function(newval, oldval) {
                if( newval !== oldval ) { // skip the initial trigger
                    this._ngModel.$setViewValue(newval !== null ? new Address(newval) : null);
                }
            }).bind(this)
        );
    };
    
    InputAddressController.prototype._render = function() {
        // KEY POINT 2
        this._unwatch();
        this.value = this._ngModel.$viewValue ? new Address(this._ngModel.$viewValue) : null;
        this._makeWatch();
    };

    return {
        restrict: 'E',
        scope: {},
        bindToController: true,
        controllerAs: 'ctrl',
        controller: InputAddressController,
        require: ['inputAddress', 'ngModel'],
        link: function(scope, elem, attrs, ctrls) {
            ctrls[0].setNgModel(ctrls[1]);
        },
        template:
            '<div>' +
                '<label><span>Street:</span><input type="text" ng-model="ctrl.value.street" /></label>' +
                '<label><span>Number:</span><input type="text" ng-model="ctrl.value.number" /></label>' +
            '</div>'
    };
});

Kluczowe punkty:

1. Edytujemy obiekt; nie chcemy bezpośrednio zmieniać obiektu przekazanego nam od rodzica (chcemy, aby nasz model był zgodny z zasadą niezmienności). Tworzymy więc płytkie obserwowanie edytowanego obiektu i aktualizujemy model za pomocą $setViewValue() każdej zmianie właściwości. Przekazujemy kopię naszemu rodzicowi.
2. Ilekroć model zmienia się z zewnątrz, kopiujemy go i zapisujemy kopię w naszym zakresie. Znowu zasady niezmienności, choć kopia wewnętrzna nie jest niezmienna, bardzo dobrze może być zewnętrzna. Dodatkowo odbudowujemy zegarek ( this_unwatch();this._makeWatch(); ), aby uniknąć wyzwalania obserwatora zmian wprowadzonych do nas przez model. (Chcemy, aby zegarek uruchamiał się tylko w przypadku zmian wprowadzonych w interfejsie użytkownika).
3. Poza powyższymi punktami implementujemy ngModel.$render() i wywołujemy ngModel.$setViewValue() tak jak w przypadku prostej kontroli (patrz przykład oceny).

Kod niestandardowej kontroli osoby jest prawie identyczny. Szablon używa <input-address> . W bardziej zaawansowanej implementacji moglibyśmy wyodrębnić sterowniki w module wielokrotnego użytku.

app.directive('inputPerson', function() {

    InputPersonController.$inject = ['$scope'];
    function InputPersonController($scope) {
        this.$scope = $scope;
        this._ngModel = null;
        this.value = null;
        this._unwatch = angular.noop;
    }

    InputPersonController.prototype.setNgModel = function(ngModel) {
        this._ngModel = ngModel;
        
        if( ngModel ) {
            ngModel.$render = this._render.bind(this);
        }
    };
    
    InputPersonController.prototype._makeWatch = function() {
        this._unwatch = this.$scope.$watchCollection(
            (function() {
                return this.value;
            }).bind(this),
            (function(newval, oldval) {
                if( newval !== oldval ) { // skip the initial trigger
                    this._ngModel.$setViewValue(newval !== null ? new Person(newval) : null);
                }
            }).bind(this)
        );
    };
    
    InputPersonController.prototype._render = function() {
        this._unwatch();
        this.value = this._ngModel.$viewValue ? new Person(this._ngModel.$viewValue) : null;
        this._makeWatch();
    };

    return {
        restrict: 'E',
        scope: {},
        bindToController: true,
        controllerAs: 'ctrl',
        controller: InputPersonController,
        require: ['inputPerson', 'ngModel'],
        link: function(scope, elem, attrs, ctrls) {
            ctrls[0].setNgModel(ctrls[1]);
        },
        template:
            '<div>' +
                '<label><span>Name:</span><input type="text" ng-model="ctrl.value.name" /></label>' +
                '<input-address ng-model="ctrl.value.address"></input-address>' +
            '</div>'
    };
});

Uwaga: Tutaj obiekty są wpisywane, tzn. Mają odpowiednie konstruktory. Nie jest to obowiązkowe; model może być prostymi obiektami JSON. W takim przypadku wystarczy użyć angular.copy() zamiast konstruktorów. Dodatkową zaletą jest to, że kontroler staje się identyczny dla dwóch kontrolek i można go łatwo wyodrębnić do jakiegoś wspólnego modułu.

Skrzypce: https://jsfiddle.net/3tzyqfko/2/

Dwie wersje skrzypce po wyodrębnieniu wspólnego kodu kontrolerów: https://jsfiddle.net/agj4cp0e/ i https://jsfiddle.net/ugb6Lw8b/