javascript - 具有更改 ng-class 的 Ui-router 嵌套 View

标签 javascript angularjs angular-ui-router ng-class

我有一个如下所示的网站设置。单击按钮 C 时,它必须更改 myClass 值。

index.html 具有的类:myClass = "container gnc1"

单击按钮 C 时所需的值:myClass = "container"

<body ui-view="viewA">  //firtsCtrl
    <div ng-class="myClass">
    <div ui-view="viewC">
    <div ui-view="viewB">

        <a ui-sref="B">Button B</a> //Loads the B.html to where viewB is. secondCtrl


        <a ui-sref="C" ng-click="removeClass()">Button C</a> //Loads the C.html where viewC is. thirdCtrl


 </div>

 </div>

这是我的代码:

第一个Ctrl:

.controller('indexCtrl', function($scope, MY) {
        $scope.myClass = ["container","gnc1"];
        $scope.removeClass = function() {
        $scope.myClass.splice(1, 2);
}
})

但这没有用。当我单击 Button C 时,“myClass”值变为空,并且 div 中没有类。

最佳答案

一种更 Angular 方法是用 $scope 变量绑定(bind)你正在改变的类,这样你就可以从你的 Controller 中改变它,如果你需要的话要在 Controller 之间共享数据,您应该使用服务,请在此处查看如何执行此操作:How to communicate between directive (tree component) and any other controller or directive in AngularJS app?

<div ng-class="{'gnc1': yourVariable}" class="container">
    <div ui-view="viewC">
    <div ui-view="viewB">
        <a ui-sref="B">Button B</a>
        <a ui-sref="C" ng-click="removeClass()">Button C</a> 
    </div>
</div>

在你的 Controller 上:

.controller('indexCtrl', function($scope, MY) {
        $scope.yourVariable = true;
        $scope.removeClass = function() {
            $scope.yourVariable = false;
        }
})

关于javascript - 具有更改 ng-class 的 Ui-router 嵌套 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33178976/

相关文章:

javascript - Angular ui.router 默认页眉页脚

javascript - 聊天类型 - 滚动到底部 - Angular 2

javascript - 回调函数返回未定义?

javascript - 无需重新加载 Controller 的子路由中的 UI-Router 和可选参数

angularjs - 使用 Angular $ q.all处理错误

javascript - Protractor - 比较数字

AngularJS UI 路由器 : Could not resolve___ from state ___ Error

javascript - meteor Restivus : Method PUT is not allowed by Access-Control-Allow-Methods in preflight response

javascript - 使用 Greasemonkey 每 5 秒执行一次 Javascript?

angularjs - Google 洞察力在 Angular 应用程序中显示出非常低的性能