如何更新指令的状态变化 [英] How to update Directive on State Changes
问题描述
我有限定角模板的整体结构的根的状态。在根状态，我已经包括侧边栏有变化基于状态通过指令动态菜单。像这样的：
.STATE（'根'，{
摘要：真实，
网址：'/根'，
templateUrl：意见/ root.html'，
}）
root.html 包括 sidebar.html 已通过指令这样调用动态菜单：
sidebar.html
＆LT; UL类=导航ID =侧面菜单＆GT;
＆LT;李班=导航标头＆GT;
＆LT; IMG ALT =阿凡达NG-SRC ={{头像}}/＆GT;
＆LT; /李＆GT; ＆LT;！ - 动态菜单指令 - ＆GT;
＆LT;李侧边栏菜单＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
该指令显示了基于 $ state.includes菜单（）。但是，什么情况是，该指令显示在第一个载荷不错，但它不更新期间状态更改指令。要解决这个问题，我尝试以下方法，但毫无效果：
- 新增了
$状态到在主控制器范围，但它仍然不会改变指令
一旦第一编译。 - 尝试添加
$ stateChangeSuccess守望触发重新编译指令，但它不
后第一次重新编译（或）不知是不是重新编译，但所做的更改不会在模板中看到（这是code现在我有
我将在下面给出）。 - 移动内部独立的子侧边栏
声明而不是根状态的作品有它，但它的节拍
目的，因为我试图加载的整体结构的根
国家第一个也是唯一刷新后续状态菜单部分
变化。
我真的不知道如何处理这一点。我有一种感觉，我的方法可能是不正常的，并希望有人可以在这里指导我。这是目前我的指令，code：
.directive（'sidebarMenus'，['$编译，$州'，'$ rootScope'，
功能（$编译，$状态，$ rootScope）{ 返回{
限制：'A'，
更换：真实，
链接：功能（范围，元素，ATTRS）{ 。VAR状态= $范围状态; //主控制器适用范围 // HTML模板
功能contructHtml（州）{ VAR的htmlText =''; //第一个孩子国家
如果（state.includes（'root.child1'））{
VAR的htmlText ='＆LT;立gt;儿童1菜单＆LT; /李＆GT;';
}
//老二州
如果（state.includes（'root.child2'））{
VAR的htmlText ='＆LT;立gt;儿童2菜单＆LT; /李＆GT;';
}
//老三州
如果（state.includes（'root.child3'））{
VAR的htmlText ='＆LT;立gt;儿童3菜单＆LT; /李＆GT;';
} $编译（的htmlText）（范围，功能（_Element，_scope）{
element.replaceWith（_Element）;
}）; } $ rootScope。在$（'$ stateChangeSuccess'，函数（）{
。VAR状态= $范围状态; //范围。$状态在主控制器添加
contructHtml（州）;
}）; //初始加载
contructHtml（州）;
}
}
}]）
您可以通过使用模板摆脱编译业务。
你范本看起来是这样的：
＆LT;李NG-IF =state.inlcudes（'root.child1'）＆gt;儿童1菜单＆LT; /李＆GT;
＆LT;李NG-IF =state.inlcudes（'root.child2'）＆gt;儿童2菜单＆LT; /李＆GT;
＆LT;李NG-IF =state.inlcudes（'root.child3'）＆gt;儿童3菜单＆LT; /李＆GT;
所以，你的指令，code应该是某事像这样
{回报
限制：'A'，
更换：真实，
模板：'＆LT; DIV＆GT; ＆LT;李NG-IF =state.inlcudes（'root.child1'）＆gt;儿童1菜单＆LT; /李＆GT;
＆LT;李NG-IF =state.inlcudes（'root.child2'）＆gt;儿童2菜单＆LT; /李＆GT;
＆LT;李NG-IF =state.inlcudes（'root.child3'）＆gt;儿童3菜单＆LT; /李＆GT;
＆LT; / DIV＆GT;'
链接：功能（范围，元素，ATTRS）{ 。$ scope.state = $范围状态; //主控制器适用范围 $ rootScope。在$（'$ stateChangeSuccess'，函数（）{
。$ scope.state = $范围状态; //范围。$状态在主控制器添加
}）;
}
}
I have a root state that defines the overall structure of the Angular template. In the root state, I have the sidebar included that has dynamic menus via directive that changes based on the state. Like this:
.state(‘root', {
abstract: true,
url: ‘/root',
templateUrl: ‘views/root.html',
})
root.html includes the sidebar.html that has dynamic menu called through Directive like this:
sidebar.html
<ul class="nav" id="side-menu">
<li class="nav-header">
<img alt="avatar" ng-src="{{ avatar }}" />
</li>
<!—Dynamic Menus Directive -->
<li sidebar-menus></li>
</ul>
The directive shows the menu based on $state.includes(). But what happens is, the directive shows fine in the first load but it doesn’t update the directive during state changes. To resolve this, I tried the following methods but nothing worked:
- Added the
$statetoscopein Main controller but it still doesn’t change the directive once it is compiled first. - Tried adding
$stateChangeSuccesswatcher to trigger recompiling the directive, but it doesn’t recompile again after the first time (or) maybe it is recompiling but the changes are not seen in the template (this is the code I have now which I will give below). - Moving the sidebar inside separate child states instead of having it in root state works, but it beats the purpose since I am trying to load the overall structure in the root state first and only refresh the menu sections in subsequent state changes.
I am not really sure how to approach this. I have a feeling my approach can be out of whack and hoping someone can guide me here. This is my directive code at the moment:
.directive('sidebarMenus', ['$compile', '$state', '$rootScope',
function($compile, $state, $rootScope) {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs) {
var state = scope.$state; // Scope from Main Controller
// HTML Template
function contructHtml(state) {
var htmlText = '';
// First Child State
if (state.includes('root.child1')) {
var htmlText = '<li>Child 1 Menu</li>';
}
// Second Child State
if (state.includes('root.child2')) {
var htmlText = '<li>Child 2 Menu</li>';
}
// Third Child State
if (state.includes('root.child3')) {
var htmlText = '<li>Child 3 Menu</li>';
}
$compile(htmlText)(scope, function( _element, _scope) {
element.replaceWith(_element);
});
}
$rootScope.$on('$stateChangeSuccess', function() {
var state = scope.$state; // scope.$state is added in main controller
contructHtml(state);
});
// Initial Load
contructHtml(state);
}
}
}])
You can get rid of the compile business by using template. You template could look something like this:
<li ng-if="state.inlcudes('root.child1')">Child 1 Menu</li>
<li ng-if="state.inlcudes('root.child2')">Child 2 Menu</li>
<li ng-if="state.inlcudes('root.child3')">Child 3 Menu</li>
So your directive code should look sth like this
return {
restrict: 'A',
replace: true,
template:'<div> <li ng-if="state.inlcudes('root.child1')">Child 1 Menu</li>
<li ng-if="state.inlcudes('root.child2')">Child 2 Menu</li>
<li ng-if="state.inlcudes('root.child3')">Child 3 Menu</li>
</div>'
link: function(scope, element, attrs) {
$scope.state = scope.$state; // Scope from Main Controller
$rootScope.$on('$stateChangeSuccess', function() {
$scope.state = scope.$state; // scope.$state is added in main controller
});
}
}
这篇关于如何更新指令的状态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
