Question

我的页面中有标题控制器和部分视图，例如：

<html ng-app="myApp" ng-controller="headerCtrl">
<head>
    <link rel="stylesheet" href="~/App/Common/Style/Common/common.css" data-ng-if="!isRTL">
    <link rel="stylesheet" href="~/App/Common/Style/Common/common-ltr.css" data-ng-if="isRTL">

</head>
<body>
...
</body>

部分视图

<div class="clearfix">
    <div class="directionSetting">
        <p class="pull-left">RTL</p>
        <div class="pull-right">
            <label class="switch">
                <input type="checkbox" ng-model="isRTL" />
                <span></span>
            </label>
        </div>
    </div>
</div>

我想在点击复选框后改变方向，但它不起作用！
但如果我在体内添加它，它的工作原理。我怎么能做到这一点？

Answer 1

这不起作用，因为浏览器将忽略该指令并加载两个样式表。

解决方案可能是命名样式表，例如

.my-class {
    color: blue;
    margin-top: 10px;
    // other defaults for this class
}
.rtl .my-class {
    color: green;
    // just the differences for the special needs of RTL
}

并在你的身体或html中添加

<body ng-class="{rtl: isRTL}">
    ...
</body>

如果您使用像less，SASS或Stylus这样的CSS预处理器，则命名空间会轻松很多。

Answer 2

您的问题似乎是角度中常见的子范围问题。

工作示例：http://plnkr.co/edit/WVdH6rhzxXDtdxT8stXR?p=preview

重要部分：

<html ng-app="demo" ng-controller="siteController as site">
  <head>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="style.ltr.css" ng-if="!site.isRtl" />
    <link rel="stylesheet" href="style.rtl.css" ng-if="site.isRtl" />
  </head>
  <body ng-controller="bodyController as body">

您尝试使用控制器是可以的，但是您的绑定直接绑定到范围，这意味着当您尝试在局部视图中将其与ng模型绑定时，您打破原型继承并写入值直接到儿童范围。然而，解释这是一个更长，更复杂的事情。

我更喜欢使用控制器作为语法，因为它有助于确保不会发生这种情况，您可以在此处详细了解：http://toddmotto.com/digging-into-angulars-controller-as-syntax/

ng-如果不在局部视图中工作 - Angular

2 个答案: