Question

为了清理我的部分内容，我最近将一些全局菜单移动到单独的模板中，现在我将其包含在需要它们的视图中。由于菜单（包括搜索栏）是全局的，我创建了一个跟踪菜单状态的服务，等等。

在我开始包括之后，问题就变得很有趣了。

视图的HTML（Jade）

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（Jade）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);
    }   
}

最初 searchBar 的值与预期的“Hello World”相同。但是，如果我附加任何文本，它仍然只打印“Hello World”。或者，如果我替换文本，它打印undefined。所以似乎绑定被打破了，但我真的不明白为什么会发生这种情况。值得一提的是，在我将搜索栏移动到单独的模板之前，情况并非如此。

非常感谢任何帮助。

Answer 1

正如上面的评论中所讨论的，ng-include创建了一个新的子范围。因此，在searchBarTemplate中，使用ng-model="searchBar"会导致在子作用域上创建新的searchBar属性，该属性会隐藏/隐藏同名的父searchBar属性。

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

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

然后使用

ng-model="obj.searchBar"

在你的模板中。使用对象（而不是基元）时，子范围不会创建新属性。相反，由于JavaScript prototypal inheritance works的方式，子范围将在父范围内找到该属性。

另请参阅https://stackoverflow.com/a/14146317/215945，其中包含显示子范围和父范围的图片，以及如果使用基元，子属性如何隐藏/隐藏父属性。

请注意，使用$parent是另一种选择，但它不是“最佳做法”。

Answer 2

尝试在包含的模板中使用$ parent而不是$ scope

AngularJS：包含和范围继承=破坏的绑定？

2 个答案: