私のディレクティブは次のように定義されています。
angular.module('mainCtrl').directive('countryCtrl', ['$compile', 'Country', function($compile, Country) {
return {
require: "^widgetPath",
restrict: 'E',
scope:{
selectedCountry: '='
},
link: function(scope, element, attrs, widgetPath) {
scope.$watch("selectedCountry", function () {
alert ("this never get called");
},true);
console.log(widgetPath.model);
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<country-ctrl id="countryCtrl" 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>
<p class="text-center" ng-show="loading"><span class="throbber"></span></p>
</country-ctrl>
選択した国を変更して$watch
も機能しません。なぜですか? ng-show が正常に動作しているため、スコープは正常に動作しています。
私が見逃しているのは単純なことだと確信しています。誰か説明できますか?