5

timezone という cusom ディレクティブ内で 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に問題があると思います。

4

2 に答える 2

5

ui-select ディレクティブで ng-model="tzModel.name" を設定する必要があります。

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/

于 2015-07-09T09:48:10.847 に答える