ng-if 在部分视图中不工作 - Angular

Question

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

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

我想在点击复选框后改变方向，但它不起作用！
但如果我在 body 中添加它，它就会起作用。我怎样才能做到这一点？

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 or Stylus 这样的 CSS 预处理器，命名空间会容易得多。

Answer 2

您的问题似乎是 angular 中常见的子作用域问题。

工作示例：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-model 绑定时，你打破了原型继承并写入值直接传给子作用域。不过，这是一个更长更复杂的事情来解释。

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

ng-if 在部分视图中不工作 - Angular

ng-if not working in partial view - Angular

angularjs