gpt4 book ai didi

javascript - 从根节点 ng-if 访问 AngularJs Controller 属性

转载 作者:行者123 更新时间:2023-11-27 23:37:32 26 4
gpt4 key购买 nike

我想从定义 ng-controller 的同一个标签访问 Angular Controller 属性,如果属性 languages,则使用 ng-if 隐藏标签 少于一个元素。

准确地说,这就是我的无效代码的样子:

<li ng-controller="LanguageController" ng-if="languages.length > 1">
...
</li>

但如果我这样做,那么它会起作用

<li ng-controller="LanguageController">
<div ng-if="languages.length > 1">...</div>
</li>

当我尝试这个时

<li ng-controller="LanguageController" data-val="{{languages.length}}">
...

输出是 ... data-val="1".. 这意味着

I can access the properties in the root element itself

此外,当我使用 ng-show 隐藏我的根元素时,它也可以工作。感谢@sarjan-desai。


问题:但是,为什么 ng-if 不工作并删除我的根 li 对象,而 ng-show 工作?

最佳答案

您可以在定义 Controller 的同一元素中访问 ng-if 或其他 ng 指令。

ng-if

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

ng-show

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

ng-if 删除或重新创建 元素,这意味着当设置 li 元素属性时,条件变为 false 并且 ng-if 删除 Controller 和整个元素。

对于 ng-show 它只是显示或隐藏 元素不添加或删除所以在开始时如果条件 false 它只隐藏元素不删除它和当 $scope 绑定(bind)到元素时,它会显示数据,因为条件变为真。

检查下面的片段

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

$scope.addresses = [{
'state': 'AL'
}, {
'state': 'CA'
}, {
'state': 'FL'
}];
});

myApp.controller('MyCtrl1', function($scope) {

$scope.addresses = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<li ng-controller="MyCtrl" ng-show="addresses.length > 0">Billing State: <tt>State selected: {{addresses}}</tt>
</li>
<li ng-controller="MyCtrl1" ng-show="addresses.length > 0">This will not show.<tt>State selected: {{addresses}}</tt>
</li>
</body>

关于javascript - 从根节点 ng-if 访问 AngularJs Controller 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33151920/

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