我正在尝试使用ng-switch和ng-include.问题在于ng-init和整个控制器块在任何包含更改时重新呈现.
在login_form.html中,当用户登录时,我在LoginCtrl中设置isLoggedIn = true.但是这会导致重新呈现下面的完整html,这会再次导致ng-init.
我该如何避免这种循环？
<div ng-controller="LoginCtrl" ng-init="isLoggedIn = false" class="span4 pull-right">
<div ng-switch on="isLoggedIn">
<div ng-switch-when="false" ng-include src="'login_form.html'"></div>
<div ng-switch-when="true" ng-include src="'profile_links.html'"></div>
</div>
</div>
以下是登录表单的HTML -
<form class="form-inline">
<input type="text" placeholder="Email" ng-model="userEmail" class="input-small"/>
<input type="password" placeholder="Password" ng-model="userPassword" class="input-small"/>
<button type="submit" ng-click="login(userEmail, userPassword)" class="btn">Sign In</button>
</form>
以下是控制器 -
angularApp.controller('LoginCtrl', function($scope, currentUser){
$scope.loginStatus = function(){
return currentUser.isLoggedIn();
};
/* $scope.$on('login', function(event, args) {
$scope.userName = args.name;
});
$scope.$on('logout', function(event, args) {
$scope.isLoggedIn = false;
});*/
$scope.login = function(email, password){
currentUser.login(email, password); …我已经盯着这个答案一段时间了,我无法绕过它:https://stackoverflow.com/a/23699009/3658800.
总结一下:
只有属性读取搜索原型链,而不是写入.所以当你设置
myObject.prop = '123';
它不会查找链条,但是当你设置时
myObject.myThing.prop = '123';
在写入操作中有一个微妙的读取,试图在写入其prop之前查找myThing.这就是为什么从子节点写入object.properties会获取父节点的对象.
我基本上要求有人详细说明这种"微妙的阅读"操作.首先评估myObject.myThing,返回对myThing对象的引用(然后设置其"prop"属性)？是否有一些我可以证实这一点的来源(Mozilla,Javascript源代码等)？
更新范围时,指令的属性不会更改,它们仍保留初始值.我在这里错过了什么？
HTML
<ul class="nav nav-pills nav-stacked" navlist>
<navelem href="#!/notworking/{{foo}}"></navelem>
<navelem href="#!/working">works great</navelem>
</ul>
<p>works: {{foo}}</p>
Javascript (基于首页上的角度标签示例)
angular.module('myApp.directives', []).
directive('navlist', function() {
return {
scope: {},
controller: function ($scope) {
var panes = $scope.panes = [];
this.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0)
this.select(pane);
panes.push(pane);
}
}
}
}).
directive('navelem', function() {
return {
require: '^navlist',
restrict: 'E',
replace: true,
transclude: true,
scope: { …我找到了这个线程,其中OP的原始小提琴,其中ng-included范围不会修改其父范围.
其中一条回复表明:
它是丑陋和不可预测的,所以我建议你将数据包装在一个对象变量:http://jsfiddle.net/e5rfP/3/
这似乎工作.为什么是这样？
所以,我可以从子控制器更改模型值,但是当子控制器在ng-switch中时,它不起作用,为什么？我创建了一个示例来演示它.
避免这种情况的一种方法是使用.模型名称,例如bunnies.kills.这是一个错误还是这个功能？
使用Angular 1.0.6
我正在编写我的angularjs指令,其定义如下:
return {
restrict: 'EA',
link: link,
scope: true,
transclude: true,
replace: true,
controller: controller,
template: '<div class="wizard">' +
'<div ng-transclude></div>' +
'</div>'
};
我注意到创建了两个范围:
< Scope (003) --- parent scope of directive
< Scope (004) --- controller scope of directive which I think is child scope created by 'scope=true'. all my functions, properites defined in controller show up in this scope
< Scope (005) --- transclude scope which is empty
从文档我期望只创建一个子范围,因为'scope = true'不会创建一个孤立的范围.这导致所有被'ng-transclude'替换的元素实际上继承了Scope(005)并且无法访问我在控制器中定义的函数/属性,因为它们在Scope(004)中,它是Scope(005)的兄弟.
我不知道出了什么问题,有人可以在这里点灯吗？
当使用Chrome调试器观察我的元素时,我注意到这些元素是由"ng-scope"类添加的,但是,如何将"ng-scope"与batarang控制台中显示的范围相匹配？比如show ng-scope的id.
谢谢
我正在检查 Angular Bootstrap UI，尤其是服务$modal并注意到一件有趣的事情。
在他们的示例中，' http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview ' 在附加到弹出窗口的控制器中，他们将所选项目包含在另一个内部属性中
$scope.selected = {
item: $scope.items[0]
};
而不是刚刚
$scope.selected = $scope.items[0];
事实上，他们的代码按预期工作，而我的版本却没有。
为什么需要这个？这里的 JavaScript 问题是什么？
谢谢
我想了解为什么当ng-repeat在重复的项目上使用带有某个控制器时,该项目的父项和该项目的祖父是同一个控制器.我期待祖父成为父控制器的父母,而不是同一个控制器.
这里的代码澄清了这一点
HTML
<div ng-controller="MainController">
{{name}}
<div ng-controller="SecondController">
{{name}}
<ul>
<li ng-repeat="item in list" ng-controller="ItemController">
{{item.name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
</li>
</ul>
<div ng-controller="ThirdController">
{{name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
</div>
</div>
</div>
JS
angular.module('app', []);
angular.module('app')
.controller('MainController', function($scope) {
$scope.name = "MainController";
})
.controller('SecondController', function($scope) {
$scope.name = "SecondController";
$scope.list = [
{'name': 'aaa'}
];
})
.controller('ItemController', function($scope) {
$scope.name = "ItemController";
$scope.myDad = $scope.$parent.name;
$scope.myGrandpa = $scope.$parent.$parent.name;
})
.controller('ThirdController', function($scope) {
$scope.name = "ThirdController";
$scope.myDad = $scope.$parent.name;
$scope.myGrandpa = …我有一个像这样定义的指令:
app.directive('itemComments', ['ajax', function(ajax) {
return {
restrict: 'A',
templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl',
controller: 'ItemLibraryController',
controllerAs: 'itemLibraryCtrl',
link: function(scope, element, attr) {
var $element = $(element);
scope.$watch(function(scope) {
return $element.find('li').length > 0;
}, function(finished) {
if(finished) {
autosize($element.find('textarea'));
}
});
}
};
}]);
"templateUrl"返回指定的模板返回如下内容:
...
<textarea class="form-control textarea-resize" ng-keyup="commentPost($event)" ng-model="textComment"></textarea>
...
在ItemLibraryController中,我定义了在textarea上的keyup上访问的方法commentPost().问题是,$scope.textComment = undefined而不是在textarea中输入的值.如果我在html中修改,ng-model="$parent.textComment"那么找到textarea中的值$scope.textComment.
PS.在指令定义中使用"template"而不是"templateUrl"时,ng-model问题消失了.
我的问题是:
为什么我必须使用$ parent.textComment,因为模板的范围是ItemLibraryController？
为什么使用templateUrl为模板内的ng-models创建另一个范围？
为什么在指令定义中使用"template"而不是"templateUrl"时,ng-model问题会消失？
如何在不使用$ parent.textComment的情况下访问textComment？
我用UI-Router路由.当我将路径从状态更改为另一个状态并返回到相同状态时,我看到状态中存在旧的$ scope (具有它的属性).
我想在状态改变之前销毁那个$ scope,所以当我第二次回到状态时,会有一个干净的新范围.我试图在这个事件中访问范围:
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
// fromState.$scope.$destroy();
});
但是没有任何关于$ scope的参考.我可以在角度改变状态之前访问范围UI-Router吗？