Question

我为if选择元素实现了custome指令，其中如果只有一个项目，则默认情况下会选择该项目，否则它将正常工作，因为正常下拉菜单可以正常工作。现在的问题是我有两个下拉菜单。公司列表和部门列表，部门列表取决于公司列表。因此，当默认情况下只有一个公司选择而不是部门清单时，默认情况下也会相应更新。为此，我尝试使用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的值未更新。

它显示日志更新的公司ID：0

我希望更新的公司ID：2

Plunker demo

Answer 1

避免将隔离范围与ng-model控制器一起使用。

//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表达式。

$ scope不从AngularJS指令更新

1 个答案: