Question

我似乎无法显示或隐藏ng-incude指令

的CSS：

#header, #mainarea {
    display:none;
}

HTML：

<body ng-app="myApp" ng-controller="myCtrl">
    <div id='login'></div>
    <div id='header' ng-include="'views/header.html'"></div>
    <div id='mainarea' ng-include="'views/mainarea.html'"></div>
<body>

JS（myCtrl）：

$scope.login = $('#login');
$scope.header = $('#header');
$scope.main = $('#mainarea');

if (correctUser) {
    $scope.header.show();
    $scope.main.show();
} else {
    $scope.login.hide();
}

我甚至在角度之前包含了jQuery链接，但由于某些奇怪的原因我无法显示ng-include指令：（

任何人都可以帮忙吗？

Answer 1

这里有一个棘手的问题，这是因为你不能像以前那样使用jQuery。

当执行控制器时，#header div的HTML实际上是这样的：

<!-- ngInclude: 'views/header.html' -->

因为ngInclude将其从DOM中取出并在必要时附加（当模板已加载并准备好显示时）。因此，当您尝试使用jQuery（如此

）设置对此元素的引用时

$scope.header = $('#header');

它找不到任何东西，因为DOM中还没有这样的id。

所以这是一个很好的例子，为什么你不应该在Angular应用程序中使用类似jQuery的样式。相反，您应该使用ngShow / ngHide / ngIf指令：

<div ng-if="correctUser" ng-include="'views/header.html'"></div>

其中correctUser来自控制器：

$scope.correctUser = true;

演示： http://plnkr.co/edit/E0uwbcsmishmRO2HROnm?p=preview

Answer 2

你可以使用ng-if，不使用jquery和CSS显示：none。

<body ng-app="myApp" ng-controller="myCtrl">
   <div id='login' ng-if="login"></div>
   <div id='header' ng-if="header" ng-include="'views/header.html'"></div>
   <div id='mainarea' ng-if="main" ng-include="'views/mainarea.html'"></div>
<body>

并在你的ctrl

中

$scope.login = true;
$scope.header = false;
$scope.main = false;

if(correctUser){
   $scope.header = true;
   $scope.main = true;
}else{
   $scope.login = false;
}

Answer 3

以下是基于您的代码的JS FIDDLE。

我的强烈建议是不要混合搭配jquery和angularjs。尝试以前的答案，并尝试坚持使用angularjs。

    var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl',function($scope){
    $scope.correctUser = false;
    $scope.lookfor = function(){
        $scope.correctUser = !$scope.correctUser;
if($scope.correctUser){
$('#header').show();
$('#mainarea').show();
}else{
$('#header').hide();
$('#mainarea').hide();
}
    }

})

<强> HTML

    <div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="lookfor()">Show Header</button>

  <div id='header'>Header Template</div>
 <div id='mainarea'>Main Area Template</div>
    </div>

<强> CSS

    #header, #mainarea{
display:none;
}

angular - 无法显示/隐藏指令

3 个答案: