我在控制器内使用 ui-select,我需要从控制器监听 ng-model 的更改,这是我的 HTML:
<div id="countryCtrl" country-selection class="form-inline">
<ui-select ng-model="selectedCountry" theme="selectize" style="{{$cat_style}}">
<ui-select-match placeholder="Select or search ...">
@{{$select.selected.title}}
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.title | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
在 countrySelection 控制器中:
angular.module('mainCtrl').directive('countrySelection', ['Country','state', function(Country, state) {
var linkF = function (scope, element, attrs, widgetPath) {
scope.$watch("selectedCountry", function (neww, old) {
console.log(scope.selectedCountry);
widgetPath.selectedCountry= widgetPath.model.selectedCountry;
scope.update("state.country.changed",scope.selectedCountry);//widgetPath.model.selectedCountry);
}, true);
};
return {
require: "^widgetPath",
restrict: 'A',
link: linkF,
scope: {}
}
}]);
如果我将 ui-select 指令中的国家/地区选择设置为如下属性,则 watch 将起作用:
<ui-select ng-model="selectedCountry" country-selection theme="selectize" style="{{$cat_style}}">
但是,然后,我将无法隔离范围country-selection
,我会得到错误
Multiple directives [countrySelection, uiSelect] asking for new/isolated scope on:
那么,我将如何从父指令ng-Model
中查看指令中的属性?ui-select
country-selection