gpt4 book ai didi

AngularJS:包含和范围继承 = 绑定(bind)损坏?

转载 作者:行者123 更新时间:2023-12-02 23:37:57 25 4
gpt4 key购买 nike

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

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

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

非常感谢任何帮助。

最佳答案

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

在 Controller 中,定义一个对象:

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

然后使用

ng-model="obj.searchBar" 

在你的模板中。当使用对象(而不是基元)时,子作用域不会创建新属性。相反,由于方式JavaScript prototypal inheritance works ,子作用域将查找父作用域上的属性。

另请参阅https://stackoverflow.com/a/14146317/215945其中有一张图片显示了子范围和父范围,以及如果使用原语,子属性如何隐藏/遮蔽父属性。

请注意,使用 $parent 是另一种选择,但它不是“最佳实践”。

关于AngularJS:包含和范围继承 = 绑定(bind)损坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15705532/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com