为什么我的 ng-if 不起作用？它没有隐藏 div答案

【问题标题】：Why is my ng-if not working? It's not hiding the div为什么我的 ng-if 不起作用？它没有隐藏 div
【发布时间】：2014-12-07 11:20:07
【问题描述】：

在我的 Angular 应用程序中，如果变量为真，我希望某个 div 出现，如果为假，则消失。

但是，它不起作用。 See my Fiddle

谁能帮我理解为什么？

HTML

<div ng-controller="MyCtrl">
    <div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew">
            <h1> + </h1>
            <h3> New Project </h3>
    </div>
    <div id="newProjectActive" class="project" ng-if="creatingNew">
        <form>
            <input name="name" ng-model="newProjectName" type="text"></input>
            <button ng-click="newProject()" type="submit" class='btn btn-primary'>Save</button>
        </form>
    </div>
</div>

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.creatingNew = false;

    $scope.newProjectActive = function () {
        $scope.creatingNew = true;
    }

    $scope.newProject = function () {
        alert($scope.newProjectName);
    }

}

【问题讨论】：

标签： angularjs angular-ng-if

【解决方案1】：

你的角度版本是1.0.1。指令ng-if 不在此版本的角度中。它在 Angular 1.1.5 中引入检查这个article 和在Directives 主题change log 下检查它的角度

AngularJS first added the ngIf directive in 1.1.5

请更新角度版本

这里是Demo

你的控制器应该是这样的

myApp.controller("MyCtrl" , function($scope) {

因为在 Angular 1.3 中默认不支持全局控制器...check this one

【讨论】：

在我的实际项目中，我实际上在使用AngularJS v1.3.4，但它仍然无法正常工作
你的控制器应该像myApp.controller("MyCtrl" , function($scope) {

【解决方案2】：

首先，当我查看您的小提琴时，那里有您的示例的旧版本，

其次，这实际上可能是一个原因，在那个例子中，您在 1.0.1 版本中使用了 angular，我相信该版本没有实现 ng-if。更新到最新版本将解决您的问题

【讨论】：

@Imray 我的错，我忘记了 1.3.0 版本已发布，它适用于 1.2.27，要找到它对您不起作用的原因，您需要找到 1.2.x 之间的差异和 1.3.x，但这是不同的问题。我猜它找不到控制器，因为当您将 myApp.controller("MyCtrl",MyCtrl); 添加到脚本末尾时它可以正常工作