Я использую angularjs, и я написал комбобокс и директиву tabs для своего приложения, которые я хочу использовать следующим образом:
<tabs>
<tab>Some content</tab>
<tab>Some other content
<my-combobox options="options" selection="selection">
</tab>
</tab>
Моя проблема в том, что в данный момент я не могу наблюдать, как свойства изменяются в поле со списком, когда он находится внутри вкладки, то есть, если я делаю это:
$scope.$watch("selection", function(){
console.log("this code doesn't run when selection changes")
});
Мои часы не срабатывают, когда пользователь выбирает элемент из списка.
Что меня удивляет, так это то, что это работает, когда я вынимаю комбинированный список из вкладки
<!-- The watch works where -->
<my-combobox options="options" selection="selection">
<tabs>
<tab>Some content</tab>
<tab>Some other content</tab>
</tab>
Итак, мой вопрос: как вкладки влияют на часы элементов, включенных в них, и как это исправить?
это код для директивы tabs:
angular.module("ip").directive("tabs", [function () {
return {
restrict: "E",
replace: true,
transclude: true,
templateUrl: "/Content/Directives/tabs.html",
bindToController: true,
controllerAs: "tabsController",
scope: {
onTabSelected: "=?"
},
controller: function () {
var self = this;
self.tabs = [];
self.addTab = function (tab) {
self.tabs.push(tab);
if (self.tabs.length === 1) {
tab.active = true;
self.onTabSelected(tab);
}
}
self.select = function (selectedTab) {
angular.forEach(self.tabs, function (tab) {
if (tab.active && tab !== selectedTab) {
tab.active = false;
}
});
selectedTab.active = true;
if (self.onTabSelected) { self.onTabSelected(selectedTab); }
}
}
};
}]);
(Edit)
Это мой код для файла tabs.html:
<div class="ip-tabs">
<ul>
<li role="presentation" ng-repeat="tab in tabs" ng-click="select(tab)" ng-class="tab.active ? 'active' : ''">
<span>{{tab.tabTitle}}</span>
</li>
</ul>
<ng-transclude>
</ng-transclude>
</div>
И директива tab.js
angular.module("ip").directive("tab", [function () {
return {
restrict: "E",
replace: true,
transclude: true,
templateUrl: "/Content/Directives/tab.html",
require: "^tabs",
scope: {
tabTitle: "@"
},
link: function (scope, element, attr, tabsCtrl) {
scope.active = false;
tabsCtrl.addTab(scope);
}
};
}]);