Angular ngClick 无法访问不同范围内的变量
-
21-12-2019 - |
题
我对 Javascript 尤其是 AngularJs 完全陌生。这是我的问题,我需要在 ng-repeat 中调用 ng-click 函数来隐藏其外部的一些 html 。
据我了解,问题是因为所有变量(在本例中特别是变量“位置”)都位于我无法访问的另一个范围内。任何人都可以帮助我以最短的方式解决这个问题吗?
到目前为止,我已经成功地几乎只用 Angular html 标签完成了我的网站(这意味着我实际上不需要编写任何自定义函数),这绝对是最后一部分。
另外,据我所知,每当创建新的角度控制器时,它都有自己的范围。在这种情况下,所有调用(除了我遇到问题的调用之外)都是在没有初始化任何控制器的情况下进行的,那么如何访问变量呢?是否有类似“默认范围”的东西?我知道 rootScope 对我不起作用。
先感谢您。
<div id="top_nav">
<div id="top_nav_right">
<div id="page_header" ng-show="checked" ng-switch on="page">
</div>
<a href="#" ng-click="checked = ! checked">
</a>
</div>
</div>
<div id="main_sidebar" class="check-element animate-hide" ng-show="checked">
<ul class="menu" ng-show="!locations">
</ul>
<ul class="menu" ng-show="locations">
</ul>
</div>
<div id="sub_sidebar" ng-show="checked" ng-switch on="page">
<div ng-switch-default "check-element animate-hide">
<div id="latest_trips_container">
<div ng-controller="PostsCtrlAjax">
<ul id="latest_trips" ng-controller="MyCtrl">
<li ng-repeat="post in travels">
<div id="trip_details">
<a id="details" href="#/details" ng-click="locations =! locations"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
解决方案
您必须创建一个围绕两个 HTML 片段的控制器:
<div ng-controller="Ctrl">
<!-- YOUR CODE HERE -->
</div>
控制器将定义位置属性,但是 里面 另一个对象(我们称之为 viewState
):
app.controller("Ctrl", function($scope) {
$scope.viewState = {
locations: false
};
};
然后绑定到内部 locations
:
<ul class="menu" ng-show="!viewState.locations">
</ul>
<ul class="menu" ng-show="viewState.locations">
</ul>
...
<a id="details" href="#/details" ng-click="viewState.locations = !viewState.locations">
这样做的原因,以及为什么它对你不起作用 $rootScope
这就是范围如何通过 Javascript 的原型继承来继承其父级的属性。粗略地、非常简短地说:
当你 读 来自某个范围的属性,并且该范围不包含此属性,JS 将查看其原型(再次 非常粗略地 也就是说,作用域的父作用域)。该链一直持续到 $rootScope
. 。所以,把 locations
在里面 $rootScope
将导致成功读取该属性。
每当你 写 一个作用域的变量,它会直接写入该作用域,无论它是从哪里读取的。如此改变 locations
内部作用域中的内容对外部作用域没有影响(例如 $rootScope
).
将变量放入对象中会导致读取对象,该对象解析为正确的范围,然后将属性写入正确的对象。
其他提示
这是我最终使用的。这似乎非常简单,但也许它将帮助他人也是初学者的别人。这基本上是用于在不同控制器中可访问的值的代码。如果我理解正确,它建议它与尼克斯相同。
var myApp = angular.module('myApp',[]);
myApp.value('Pages',{page:"My Profile"});
myApp.value('Menu',{show:false});
myApp.value('Menu2',{show2:false});
myApp.controller('MainMenu', function($scope,Menu,Pages) {
$scope.menu = Menu;
$scope.pages = Pages;
});
myApp.controller('MainSidebar', function($scope,Menu,Menu2,Pages) {
$scope.menu = Menu;
$scope.menu2 = Menu2;
$scope.pages = Pages;
});
myApp.controller('SecondSidebar', function($scope,Menu,Menu2,Pages) {
$scope.menu = Menu;
$scope.menu2 = Menu2;
$scope.pages = Pages;
});
myApp.controller('TripsFx', function($scope,Menu2,Pages) {
$scope.menu2 = Menu2;
$scope.pages = Pages;
})
. 这是我所做的rootible rootscope。
在app.run中设置rootscope :(不要忘记注入$ rootscope)
var myApp = angular.module('ProGen', []);
myApp.run(function($rootScope) {
//setup Rootscope
$rootScope.locations = false;
})
.
创建一个具有更改Rootscope的函数的控制器($ rootscope注入)
function someCtrl($rootScope, $scope) {
$scope.travels = [
{dest: 'Rome'},
{dest: 'London'}
];
$scope.flipMenu = function() {
$rootScope.locations = !$rootScope.locations;
}
}
.
所以这是html:
<html ng-app>
{...}
<body>
<div id="main_sidebar">
<ul class="menu" ng-show="!locations">
<li>x1</li>
<li>x2</li>
<li>x3</li>
<li>x4</li>
</ul>
<ul class="menu" ng-show="locations">
<li>y1</li>
<li>y2</li>
<li>y3</li>
<li>y4</li>
</ul>
</div>
<div ng-click="locations =! locations">Change me (no Controller)</div>
<div ng-controller="someCtrl">
<ul>
<li ng-repeat="post in travels">
<div ng-bind="post.dest" ng-click="flipMenu()"></div>
</li>
</ul>
</div>
</body>
</html>
.
,这是JS:
var myApp = angular.module('ProGen', []);
myApp.run(function($rootScope) {
//setup Rootscope
$rootScope.locations = false;
})
function someCtrl($rootScope, $scope) {
$scope.travels = [
{dest: 'Rome'},
{dest: 'London'}
];
$scope.flipMenu = function() {
$rootScope.locations = !$rootScope.locations;
}
}
.
你会在这里找到一个工作博金: http://plnkr.co/edit/ygllio55ai5q8wkicc5?p= preview
不确定是否这是想要的。但我希望它有所帮助。 (不要对我大喊大叫,这是反对角禅,因为原因: - )