我在 AngularJS 项目中使用 ui-router,我有一个包含自定义指令的嵌套 View 。 该指令呈现一个输入字段(可以说是一个过滤器字段),它的值应该与 Controller 的范围同步。
当 View /状态不是嵌套时,这对这个指令很有效:
jsFiddle / not nested / working as expected
var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.
state('home', {
url: '',
template: '<my-filter text-filter="theFilter"></my-filter><button ng-click="inspect()">inspect</button>{{ theFilter |json}}',
controller: 'myController'
});
}]);
var components = angular.module('myComponents', []);
components.directive('myFilter', [function () {
return {
restrict: 'E',
template: '<input type="text" name="filter" ng-model="textFilter">',
scope: {
textFilter: '='
}
};
}]);
components.controller('myController', ['$scope', function ($scope) {
$scope.theFilter = 'initial filter';
$scope.inspect = function () {
alert($scope.theFilter);
}
}]);
查看:
<div ng-app="myApp">
<div ui-View></div>
</div>
当我更改输入字段的文本时,它会反射(reflect)在范围上...
...但是当我嵌套 View /状态时,作用域上的值保持其初始值,但我希望它在覆盖时根据输入字段的值进行更改。
var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.
state('home', {
abstract: true,
url: '',
template: 'Nested View:<div ui-view></div>',
controller: 'myController'
}).
state('home.detail', {
url: '',
template: '<my-filter text-filter="theFilter"></my-filter><button ng-click="inspect()">inspect</button>{{ theFilter |json}}'
});;
}]);
var components = angular.module('myComponents', []);
components.directive('myFilter', [function () {
return {
restrict: 'E',
template: '<input type="text" name="filter" ng-model="textFilter">',
scope: {
textFilter: '='
}
};
}]);
components.controller('myController', ['$scope', function ($scope) {
$scope.theFilter = 'initial filter';
$scope.inspect = function () {
alert($scope.theFilter);
}
}]);
查看:
<div ng-app="myApp" >
<div ui-View></div>
</div>
这里,作用域上的文本(参见 Controller )保持不变。
知道如何使用嵌套 View 获得与第一个示例相同的结果吗?
PS:指令需要保持可重用
最佳答案
这与一个常见问题有关。如本视频中所述 angular JS - best practice (29:19),并在此处解释:Nested Scopes in Angular JS
"Whenever you have ng-model there's gotta be a dot in there somewhere. If you don't have a dot, you're doing it wrong."
所以 Controller 应该创建一个对象:
components.controller('myController', ['$scope', function($scope) {
// here theFilter is an object
// with property value
$scope.theFilter = { value : 'initial filter'};
$scope.inspect = function() {
alert($scope.theFilter.value);
}
}]);
并且模板应该与具有属性 value
的对象一起工作:
components.directive('myFilter', [function() {
return {
restrict: 'E',
template: '<input type="text" name="filter" ng-model="textFilter.value">',
scope: {
textFilter: '='
}
};
}]);
更新的jsfiddle
关于javascript - 指令隔离范围不能与嵌套 View 一起正常工作? (AngularJS/UI 路由器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23043216/