Ui-改变 ng-class 的路由器嵌套视图

Question

我的网站设置如下。当 Button C 单击时，它必须更改 myClass 值。

Class index.html 有：myClass = "container gnc1"

当Button 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>

这是我的代码：

firstCtrl:

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

但这没有用。当我单击 Button C "myClass" 时，值变空并且 div 中没有 class。

Answer 1

一种更 angular 的方法是将您的更改 class 与 $scope 变量绑定，这样您就可以从您的控制器更改它，如果您需要的话在您的控制器之间共享数据您应该使用 service，请在此处查看如何执行此操作：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('indexCtrl', function($scope, MY) {
        $scope.yourVariable = true;
        $scope.removeClass = function() {
            $scope.yourVariable = false;
        }
})

Ui-改变 ng-class 的路由器嵌套视图

Ui-router nested views with changing ng-class

javascript

angularjs

angular-ui-router

ng-class