我有这个指令$scope.mode
在父项中发生了变化$scope
:
angular.module('Selector', []).directive('mySelector', function() {
var changeMode;
changeMode = function(newmode) {
var $scope;
$scope = this;
$scope.mode = newmode;
$('.menu-open').attr('checked', false);
return $scope.mode;
};
return {
restrict: 'E',
scope: {
mode: '=mode',
id: '@id'
},
replace: true,
templateUrl: './directives/modeSelector/Selector.tpl.html',
link: function(scope, element, attrs) {
scope.changeZoneMode = changeMode;
return scope.$watch((function() {
return scope.mode;
}), function(newMode) {
return scope.mode = newMode;
});
}
};
});
该指令包含在main.html中,以及加载子视图的ui-view中:
<my-selector mode="current.Mode" id="{{current.ID}}"></my-selector>
<!-- This binding works and updates properly -->
{{current.Mode}}
<!-- Subview container -->
<div ui-view="sub"></div>
subviewTemplate.html:
<!-- This binding doesn't work! -->
{{current.Mode}}
子视图没有特定的控制器,它使用父控制器,如app.js中的设置:
.state('app.details', {
name: 'appDetails',
url: '/:zoneID',
views: {
'appContent': {
templateUrl: 'main.html',
controller: 'ctrl'
}
}
}).state('app.details.overview', {
name: 'appDetailsOverview',
url: '/details',
views: {
'appContent': {
templateUrl: 'main.html',
controller: 'ctrl'
},
'sub': {
templateUrl: 'subviewTemplate.html',
controller: 'ctrl'
}
}
});
以及main.html和subviewTemplate.html使用的控制器:
angular.module('myController', ['services']).controller('ctrl', [
'$scope', 'Data', function($scope, Data) {
$scope.current = new Data;
$scope.current.load();
return $scope.$watch('current.Mode', (function(newValue, oldValue) {
console.log('Old value is: ' + oldValue);
$scope.current.Mode = newValue;
return console.log('new value is: ' + $scope.currentMode);
}), true);
}
]);
我不明白为什么它适用于main.html,正确更新,但不适用于subviewTemplate.html。console.log
inside$watch
打印正确的值。
有什么帮助吗?我在这里做错了什么?