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

Posted 2023-03-05

技术标签:

【中文标题】AngularJS：包含和范围继承=损坏的绑定？【英文标题】：AngularJS: Include and scope inheritance = broken bindings? 【发布时间】：2013-03-20 06:57:01 【问题描述】：

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

问题是在我开始包含之后发生了一些有趣的事情。

视图的 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) 搜索栏模板

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”。或者，如果我替换它打印未定义的文本。所以看起来绑定被打破了，但我真的不明白为什么会这样。值得一提的是，在我将搜索栏移到单独的模板中之前，情况并非如此。

非常感谢任何帮助。

【问题讨论】：

创建一个复制问题的演示好的，我会搞定的。如果您查看视图的顶部，它包括 searchBarTemplate。我修改了关于范围的评论......但如果没有看到实时版本就很难提供帮助 ng-include 创建一个新的子范围。因此，在您的 searchBarTemplate 中，使用 ng-model="searchBar" 会在子范围内创建一个新的 searchBar 属性，该属性会隐藏/隐藏同名的父 searchBar 属性。尝试在控制器中使用$scope.obj = searchBar: 'Hello World!，在模板中使用ng-model="obj.searchBar"。 @MarkRajcok 解决了问题，将来更容易将演示放在 Plunker 中，这样它们就可以被编辑并且更容易审查代码。允许为部分和不同的 js 文件等非常简单地创建外部文件 【参考方案1】：

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

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