隔离范围指令无法正常连同嵌套视图的工作？ （AngularJS / UI路由器） [英] Directives isolated scope not working properly together with nested views? (AngularJS / UI Router)

问题描述

我使用了AngularJS项目中，我有一个包含自定义指令嵌套视图UI的路由器。
该指令使输入字段（可以说一个过滤器，场）和其值应与控制器的范围同步​​。

I'm using ui-router in a AngularJS project where I have a nested view that contains a custom directive. This directive renders an input field (lets say a filter-field) and its value should be in sync with the controller's scope.

这很适合这个指令，当视图/状态不是嵌套：

This works well for this directive, when the view/state not is nested:

的jsfiddle /没有嵌套/按预期工作

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>

当我改变输入字段的文本，它就会反映在范围...

When I change the input field's text, it gets reflected on the scope...

...但是当我巢视图/状态，在范围值保持它的初始值，但我希望覆盖时根据输入字段的值，它得到改变。

...but when I nest the view/state, the value on the scope keeps it's initial value but I expect it to get changed according to the input field's value when overwriting.

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>

在这里，范围文（见控制器）保持不变。

Here, the text on the scope (see controller) remains the same.

任何想法，我可以如何与嵌套视图得到同样的结果在第一个例子？

Any idea how I can get the same result with nested views as in the first example?

PS：这个指令需要保持可重复使用

PS: The directive needs to remain reusable

的jsfiddle /嵌套/预期

推荐答案

这是关系到一个常见的​​问题。在这段视频中提到的角JS - 最佳实践（29:19），在这里解释：嵌套范围在角JS

This is related to a common issue. As mentioned in this video angular JS - best practice (29:19), and explained here: Nested Scopes in Angular JS

每当你有NG-模型有一定有在某处有一个点，如果你没有一个点，你这样做是不对的。

"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."

所以控制器应创建一个对象：

So the controller should be creating an object:

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);
    }    
}]);

和模板应与有产权的目标工作值：

and the template should work with an object having property value:

components.directive('myFilter', [function() {
    return {
        restrict: 'E',
        template: '<input type="text" name="filter" ng-model="textFilter.value">',
        scope: {
            textFilter: '='             
        }
    };          
}]);

更新过的的jsfiddle

这篇关于隔离范围指令无法正常连同嵌套视图的工作？ （AngularJS / UI路由器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！