передача ngModel и ngChange с пользовательской директивой в md-select - PullRequest
Новая
       21

передача ngModel и ngChange с пользовательской директивой в md-select

0 голосов
/ 12 февраля 2019

Я делаю пользовательскую директиву поверх md-select.У меня проблемы с поведением по умолчанию ngModel и ngChange.Я не могу заставить их обоих работать вместе.

В настоящее время у меня есть это http://next.plnkr.co/edit/X34DUWtkyYhbwJP4?open=lib%2Fscript.js

ngModel обновляется, но ngChangeпохоже, не работает.

Я также попытался метод, показанный в http://embed.plnkr.co/HZAHSyi9L8UQdE24zYYI/, но возникли проблемы при установке значения с тайм-аутом (при условии, что значение исходит из API). 

app.controller("appCtrl", function($scope){
  $scope.items = [1,2,3,4,5,6];
  $scope.foo=2; // this works
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  }
  setTimeout(function(){
    $scope.foo=5;
  }, 0); // this doesnt work
});

Я хочу, чтобы эти два атрибута работали по умолчанию md-select.

1 Ответ

0 голосов
/ 12 февраля 2019

При работе с ng-моделью и пользовательскими директивами вы можете указать ngModel как требование, а затем автоматически получить доступ к другим директивам, таким как ngChange и ngRequired.Я обновил ваш план: http://next.plnkr.co/edit/VzYpZ2elmzV6XkbM?open=lib

HTML 

<md-custom-select 
    ng-model="vm.SelectItems" 
    ng-change="vm.onselectchange()" 
    list="vm.ItemList">
</md-custom-selector>

JavaScript 

var app = angular.module("MaterialApp", ["ngMaterial"]);
app.directive("mdCustomSelect", ["$compile", mdCustomSelect]);

function mdCustomSelect($compile) {
    return {
        restrict: "E",
        require: {
            ngModelCtrl: '^ngModel'
        },
        scope: {
            ngModel: "<",
            list: "=",
            options: "<",
        },
        replace: true,
        link: function(scope, element, attrs, controllers) {
            scope.ngModelCtrl = controllers.ngModelCtrl;

            var searchTemplate = '<md-select-header aria-label="Select Header" class="demo-select-header"><input aria-label="InputSearchBox" ng-keydown="$event.stopPropagation()" ng-model="searchTerm" type="search" placeholder="Search items" class="md-text"></md-select-header>';
            var selectAllTemplate = '<div style="padding: 0px 0px 15px 5px; background-color: #efefef;"><md-checkbox class="md-warn" title="Select All" ng-model="checkAllChecked" ng-change="toggleSelectAll()">Check/Uncheck All </md-checkbox></div>';
            var multiSelectGroupTemplate = '<md-option ng-value="item.ItemID" ng-repeat="item in ItemList | filter: searchTerm">{{item.ItemName}}</md-option>';
            var completeTemplate = "";
            completeTemplate += '<md-select multiple ng-model="ngModel" ng-change="valChanged()" data-md-container-class="selectdemoSelectHeader">';
            completeTemplate += searchTemplate; //2 begin and end
            completeTemplate += selectAllTemplate; //3 begin and end
            completeTemplate += multiSelectGroupTemplate; //4 begin and end
            completeTemplate += " </md-select>"; //1 end
            element.html(completeTemplate);
            $compile(element.contents())(scope);
        },
        controller: ["$scope", function($scope) {
            var defaultValueProperty = ($scope.options == undefined || $scope.options.Value === undefined) ? "value" : $scope.options.Value;
            var defaultTextProperty = ($scope.options == undefined || $scope.options.Text === undefined) ? "name" : $scope.options.Text;
            $scope.isMultipleSelected = angular.isUndefined($scope.multiple) ? true : $scope.multiple;
            $scope.checkAllChecked = false;

            $scope.ItemList = [];
            var rawItemList;

            $scope.$watch("list", function(newValue) {
                $scope.ItemList = newValue.map(item => {
                    return { ItemID: item[defaultValueProperty], ItemName: item[defaultTextProperty] };
                });
            }, true);

            $scope.valChanged = function(){
                $scope.ngModelCtrl.$setViewValue($scope.ngModel);
            }

            $scope.toggleSelectAll = function() {
                if ($scope.checkAllChecked == false) {
                    $scope.ngModelCtrl.$setViewValue([]);
                } else {
                    $scope.ngModelCtrl.$setViewValue($scope.ItemList.map(item => item.ItemID));
                }
            };
        }]
    };
}
...