Angularjs ui-select 在指令中使用
Angularjs ui-select used in directive
我在名为时区的自定义指令中使用 angular-ui ui-select 指令。问题是当时区从列表中 selected 时,周围控制器的模型对象不会更新。
这是我的指令代码:
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>
问题是,当我从下拉列表中 select 一个新值时,我的控制器对象没有更新。
Here is the jsFiddle
我猜 ui-select 有问题,因为我用其他组件做了同样的工作。
您需要在 ui-select 指令中设置 ng-model="tzModel.name"。
<timezone tz-model="foo" />
<ui-select theme="bootstrap" ng-model="tzModel.name" ...
我对你的 fiddle 进行了更改,看看这个,它正在运行 -> fiddle
您必须进行以下更改
在view.html
<div ng-app="MyApp" ng-controller="MyCtrl">
{{foo.name}}<br />
<timezone tz-model="foo" />
</div>
将第 3 行更改为 tz-model = "foo"
在controller.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" ....希望对您有所帮助
我在名为时区的自定义指令中使用 angular-ui ui-select 指令。问题是当时区从列表中 selected 时,周围控制器的模型对象不会更新。 这是我的指令代码:
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>
问题是,当我从下拉列表中 select 一个新值时,我的控制器对象没有更新。 Here is the jsFiddle 我猜 ui-select 有问题,因为我用其他组件做了同样的工作。
您需要在 ui-select 指令中设置 ng-model="tzModel.name"。
<timezone tz-model="foo" />
<ui-select theme="bootstrap" ng-model="tzModel.name" ...
我对你的 fiddle 进行了更改,看看这个,它正在运行 -> fiddle
您必须进行以下更改
在view.html
<div ng-app="MyApp" ng-controller="MyCtrl">
{{foo.name}}<br />
<timezone tz-model="foo" />
</div>
将第 3 行更改为 tz-model = "foo"
在controller.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" ....希望对您有所帮助