AngularJS：包括和范围继承=破碎的绑定？ [英] AngularJS: Include and scope inheritance = broken bindings?

问题描述

在试图清理我的谐音我最近搬到我的一些全球性的菜单到单独的模板，我现在包括在需要他们的意见。作为菜单（包括搜索栏）是全球性的我已经创建了保持菜单状态的轨道等的服务。

In an attempt to clean up my partials I recently moved some of my global menus into seperate templates which I now include in the views which need them. As the menu (including a search bar) is global I have created a service which keeps track of the state of the menu and so on.

问题是什么后，我开始，包括搞笑的事情。

Problem is something funny happened after I started including.

HTML视图的（玉）

div(ng-controller='HeroUnitCtrl', ng-include src='heroTemplate')
div(ng-controller='MainSearchBarCtrl', ng-include src='searchBarTemplate')

div.row-fluid
    div.span12
        table.table.table-striped.table-bordered
            tr
                th
                    a(ng-click='setOrder("id")') ID#
                th
                    a(ng-click='setOrder("client.name")') Kunde
                th
                    a(ng-click='setOrder("technician.name")') Tekniker
                th
                    a(ng-click='setOrder("createdAt")') Opprettet
                th
                    a(ng-click='setOrder("statusString")') Status

            tr(ng-repeat='record in records | orderBy:orderProp | filter:searchBar')
                td
                    a(ng-href='#/records/show/{{record.id}}') {{record.id}}
                td {{record.client.name}}
                td {{record.technician.name}}
                td {{record.createdAt}}
                td {{record.statusString}}

HTML（玉）searchBarTemplate

input#searchField.input-xxlarge(type='text', placeholder='placeholder', ng-change='searchBarUpdated()', ng-model='searchBar')

的现在到了位我真不明白，的

MainSearchBarCtrl

function MainSearchBarCtrl(MainSearchBarService, $scope, $location) {
    $scope.searchBarTemplate = 'partials/main-searchbar';
    $scope.searchBar = 'Hello World!';

    $scope.searchBarUpdated = function() {
        console.log('Search bar update: ' + $scope.searchBar);
        MainSearchBarService.searchBarUpdated($scope.searchBar);
    }   
}

最初值的搜索栏的是预期的Hello World。不过，如果我追加任何文本仍然只输出Hello World。或者，如果我替换文本它打印不确定的。因此，似乎被打破了约束力，但我实在不明白为什么会这样。值得一提的是，之前，我提出我的搜索栏到一个单独的模板，这是不区分。

Initially the value of searchBar is as expected "Hello World". However, if I append any text it still only prints "Hello World". Or, if I replace the text it prints undefined. So it seems the binding is broken, but I don't really see why this is happening. Worth mentioning is that this wasn't case before I moved my search bar into a separate template.

任何帮助是极大AP preciated。

Any help is greatly appreciated.

推荐答案

由于在评论上述讨论， NG-包括创建一个新的子范围。因此，在新的搜索栏属性您searchBarTemplate，使用 NG-模式=搜索栏结果对孩子创建范围，其中隐藏/阴影父搜索栏的同名属性。

As discussed in the comments above, ng-include creates a new child scope. So in your searchBarTemplate, using ng-model="searchBar" results in a new searchBar property being created on the child scope, which hides/shadows the parent searchBar property of the same name.

在控制器中，定义一个对象：

In the controller, define an object:

$scope.obj = {searchBar: 'Hello World!};

然后用

ng-model="obj.searchBar" 

在您的模板。当对象被使用（而不是原语），子范围不创建一个新的属性。相反，由于在路<一个href=\"http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482\">JavaScript原型继承工作，孩子范围会发现在父作用域属性。

in your template. When objects are used (instead of primitives), the child scope does not create a new property. Rather, due to the way JavaScript prototypal inheritance works, the child scope will find the property on the parent scope.

另请参阅 http://stackoverflow.com/a/14146317/215945 一个具有显示孩子的图片，父范围和孩子怎么财产隐藏/阴影，如果一个原始的使用parent属性。

See also http://stackoverflow.com/a/14146317/215945 which has a picture showing the child and parent scopes and how the child property hides/shadows the parent property if a primitive is used.

请注意，使用 $父是另一种选择，但它不是最佳实践。

Note that using $parent is another option, but it is not "best practice".

这篇关于AngularJS：包括和范围继承=破碎的绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！