$ scope не обновляется из директивы AngularJS - PullRequest
Новая
       19

$ scope не обновляется из директивы AngularJS

0 голосов
/ 28 сентября 2019

Я реализую директиву custom для элемента select, в котором, если есть только один элемент, он выбирает этот элемент по умолчанию, иначе он работает как обычный выпадающий список, который работает нормально.Теперь проблема в том, что у меня есть два раскрывающихся списка.Список компаний и список отделов, список отделов зависит от списка компаний.таким образом, если только одна компания, выбранная по умолчанию, список отделов также обновится соответственно по умолчанию.Для этого я пытаюсь использовать ng-change, но он не получает доступ к обновленному значению, он показывает старое значение в журнале.

Мой код angularjs ниже: 

angular.module('TestApp', [
]);
angular.module('TestApp').directive('advanceDropdown', function () {
    var directive = {}
    directive.restrict = 'A';
    directive.require = 'ngModel';
    directive.scope = {
        items: '=advanceDropdown',
        model: '=ngModel',
        key: '@key',
        change: '&ngChange'
    }
    directive.link = function (scope, element, attrs, ctrl) {
        scope.$watch('items', function (n, o) {
            if (scope.items.length == 1) {
                scope.model = scope.items[0][scope.key];
                scope.change();
            }
        });
    } 

    return directive;
});


(function () {
    'use strict';
    angular.module('TestApp').controller('TestCtrl', ['$scope', TestCtrl]);

    function TestCtrl($scope) {

        $scope.departmentList = [];
        $scope.companyList = [];
        $scope.designation = new Designation();
        $scope.active = null;
        $scope.BindDepartments = function () {
            
            console.log('updated companyId:' + $scope.designation.CompanyId);

            //Code here
            //Load department base on selected company
            //$scope.departmentList = data;
        }

        $scope.GetCompanyById = function (companyId) {
            //Get company data by id 
            //recived from server
            $scope.companyList = [{CompanyId:2,CompanyName:'xyz'}];
        }


        $scope.Init = function () {
            $scope.active = null;
            $scope.designation = new Designation();
            $scope.GetCompanyById(2); 
        }
    }

})();

function Designation() {
    this.DesignationId = 0;
    this.DesignationName = '';
    this.DepartmentId = 0;
    this.CompanyId = 0;
}
Designation.prototype = {
    constructor: Designation
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<select ng-model="designation.CompanyId"                 
        ng-options="dept.CompanyId as dept.CompanyName for dept in companyList"
        ng-change="BindDepartments()"
        advance-dropdown="companyList" key="CompanyId" required>
    <option value=""  disabled>--Select Company--</option>
</select>                    
</div>

В методе BindDepartment() значение $scope.designation.CompanyId не было обновлено.

Это Показать журнал обновленный идентификатор компании: 0

Я ожидаю, что обновленный идентификатор компании: 2

Демо Plunker

1 Ответ

1 голос
/ 28 сентября 2019

Избегайте использования изолированного прицела с контроллером ng-модели.

//directive.scope = {
//    items: '=advanceDropdown',
//    model: '=ngModel',
//    key: '@key',
//    change: '&ngChange'
//}

directive.scope = false;

Вместо этого используйте метод $ setViewValue для изменения значения модели. 

directive.link = function (scope, element, attrs, ctrl) {
    scope.$watchCollection(attrs.advanceDropdown, function (n, o) {
        if (n && n.length == 1) {
            ctrl.$setViewValue(n[0]);
        }
    });
}

Метод $setViewValue автоматически вызовет выражение ng-change.

...