Angularjs ui-select используется в директиве

Я использую директиву angular-ui ui-select внутри моей пользовательской директивы, называемой часовым поясом. Проблема в том, что объект модели окружающего контроллера не обновляется при выборе часового пояса из списка. Вот код моей директивы:

var myApp = angular.module('MyApp', ['ui.select','ngSanitize']);

myApp.directive('timezone', function () {
return {
    restrict: 'AE',
    template: '<ui-select theme="bootstrap" ng-model="tzModel" style="min-width: 300px;"> <ui-select-match placeholder="Select a timezone in the list">{{$select.selected}}</ui-select-match> <ui-select-choices repeat="tz in timezones | filter: $select.search"> <div ng-bind-html="tz"></div> </ui-select-choices> </ui-select>',

    scope: {
        tzModel : '=',
    },
    link: function(scope) {
        scope.timezones = ["Africa/Abidjan", "UTC"];
    }
};
});

Мой контроллер:

myApp.controller('MyCtrl', function ($scope) {
  $scope.foo = {name:"Africa/Abidjan"};
});

Вот как я использую это в html:

<div ng-app="MyApp" ng-controller="MyCtrl">
  {{foo}}<br />
  <timezone tz-model="foo.name" />
</div>

Проблема в том, что когда я выбираю новое значение из выпадающего списка, мой объект контроллера не обновляется. Вот jsFiddle Я предполагаю, что проблема с ui-select, потому что я проделал ту же работу с другие компоненты.


angularjs angular-ui ui-select
person vizog    schedule 09.07.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам нужно установить ng-model="tzModel.name" в директиве ui-select.

https://github.com/angular-ui/ui-select/wiki/FAQs#ng-model-not-working-with-a-simple-variable-on-scope

<timezone tz-model="foo" />

<ui-select theme="bootstrap" ng-model="tzModel.name" ...

https://jsfiddle.net/XyUGE/264/

person Bharat    schedule 09.07.2015
comment
Спасибо @Bharat, вы совершенно правы. В итоге я использовал решение «взломать», упомянутое в вашей ссылке, где мы используем $parent.tzModel в ng-модели директивы. Потому что я не хочу заставлять пользователей директивы иметь поле «имя» в своих объектах модели. - person vizog; 11.07.2015

arrow_upward
3
arrow_downward

Я внес изменения в вашу скрипку, посмотрите, она работает -> скрипка

Вы должны внести следующие изменения

в view.html

<div ng-app="MyApp" ng-controller="MyCtrl">
    {{foo.name}}<br />
    <timezone tz-model="foo" />
</div>

измените 3-ю строку на tz-model = "foo"

в контроллере.js

var myApp = angular.module('MyApp', ['ui.select','ngSanitize']);

myApp.controller('MyCtrl', function ($scope) {
    $scope.foo = {name:"Africa/Abidjan"};
});

myApp.directive('timezone', function () {
    return {
        restrict: 'AE',
        template: '<ui-select theme="bootstrap" ng-model="tzModel.name" style="min-width: 300px;"> <ui-select-match placeholder="Select a timezone in the list">{{$select.selected}}</ui-select-match> <ui-select-choices repeat="tz in timezones | filter: $select.search"> <div ng-bind-html="tz"></div> </ui-select-choices> </ui-select>',

        scope: {
            tzModel : '=',
        },
        link: function(scope) {
            scope.timezones = ["Africa/Abidjan", "UTC"];
        }
    };
});

Согласно документам, вы должны сохранить модель как «tzModel.name» вместо «tzModel».... Надеюсь, это поможет.

person akashrajkn    schedule 09.07.2015
comment
Спасибо @akashrajkn. Ваше решение верное. Я принял предыдущий, потому что он был представлен ранее. Большое тебе спасибо - person vizog; 11.07.2015