为什么ng-show不能正常工作?

时间:2015-09-22 17:08:22

标签: javascript angularjs ng-show

为什么ng-show无法正常工作? 我有代码:

<h3 class="alert alert-danger" ng-show="errorsFlag.flag">{{errorMessage}}</h3>

在我的控制器中:

$scope.errorsFlag = { flag:false };
//some code
SomeFunction.getSomething()
   .then(
        //success
        function(result){
            $scope.errorsFlag.flag = false;
        },
        //fail
        function(error){
            $scope.errorsFlag.flag = true;
        }
    ).finally(//some code);

当我的功能出错时,

  

$ scope.errorsFlag.flag = true

,并且页面元素'h3'必须是可见的,但是当我刷新页面时,一旦它可见,一旦它不可见,会出现什么问题? 当我检查代码时,我看到了:

<h3 class="alert alert-danger ng-binding ng-hide" ng-show="errorsFlag.flag"></h3>

,但在控制台中,$ scope.errorsFlag.flag = true!; 在我的小提琴它的工作,但在我的项目是不工作,我明白,没有所有代码你不能告诉什么样的错误,但也许有人是相同的错误和记住如何解决它。

  

https://jsfiddle.net/gc3equ1f/1/

谢谢。

3 个答案:

答案 0 :(得分:1)

事件我也遇到过ng-show这个问题。尝试使用$scope.$apply()更新范围后。 或者您也可以将ng-if用于同一目的。

答案 1 :(得分:0)

删除 ng-show 指令并使用 ng-bind =“errorMessage”

您不需要 errorsFlag.flag errorsFlag 对象。

如果您确实需要display:noneh3

你可以使用 ng-show =“errorMessage” ng-bind =“errorMessage”

   <h3 class="alert alert-danger ng-binding ng-hide" ng-show="errorMessage"  ng-bind="errorMessage"></h3>

答案 2 :(得分:0)

另一种方法是使用控制器作为语法,而使用this关键字。试试这个小提琴:https://jsfiddle.net/hjamal/hu4t0zL8/2/

所以你的代码看起来像这样:

&#13;
&#13;
var app = angular.module('myApp', []);

app.controller('TestC', function TestC ($scope, $q){
    var self = this;
 	self.errFlag = {
        flag: true
    };
    
    var someFunc = function() {
      	serviceFunc().then(
            function(){
             	self.errFlag.flag = false;   
            },
            function(){
             	self.errFlag.flag = true;   
            }
        );
    };
    
    var serviceFunc = function(){
            var def = $q.defer();
        
        	def.reject("error 404");

            return def.promise;
        };    
    //someFunc();
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller='TestC as tc'>demo
        <!--  ng-show="errFlag.flag"  -->
        <h3 class="alert alert-danger" ng-show="tc.errFlag.flag">
                {{tc.errFlag.flag}}
        </h3>
    </div>
</div>
&#13;
&#13;
&#13;