Angularjs ui-select在指令中使用

发布时间：2020-12-17 17:49:56 所属栏目：安全来源：网络整理

导读：我在我的cusom指令里面使用angular-ui ui-select指令叫做timezone.问题是当从列表中选择时区时,不会更新周围控制器的模型对象. 这是我的指令代码： var myApp = angular.module('MyApp',['ui.select','ngSanitize']);myApp.directive('timezone',function ()

我在我的cusom指令里面使用angular-ui ui-select指令叫做timezone.问题是当从列表中选择时区时,不会更新周围控制器的模型对象.
这是我的指令代码：

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>

问题是,当我从下拉列表中选择一个新值时,我的控制器对象不会更新.
Here is the jsFiddle
我猜ui-select存在问题,因为我已经完成了与其他组件相同的工作.

解决方法

您需要在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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!