指令中特定范围的设置值在angularjs中不起作用?

时间:2013-12-03 12:13:25

标签: javascript jquery html angularjs

我有像这样的HTML

    <div ng-controller="main">
       <div ng-show="showhide">welcome</div>
       <div my-directive>click</div>
       <div ng-click="submit()">submit</div>
    </div>

我这样的控制器

 app.controller('main',function($scope)
{
     $scope.showhide=true;
     $scope.submit=function()
    {

       alert($scope.showhide); //true
       $scope.showhide=true;
    }
});

我这样的指示

app.directive('myDirective',function(){

     return function(scope, elem, attrs)
     {
        elem.bind('click', function()
        {
             scope.$apply(function()
             {
               scope.showhide=false;

             });

        });
     }


});

我的要求是当我点击单击按钮时我必须隐藏欢迎,然后当用户点击提交按钮时我必须显示但是这里发生的事情当我点击单击按钮它隐藏但是当我点击提交按钮它没有显示出来。在警报中也是如此,但是应该是假的,那么如何解决这个问题呢?如果你有解决方案,请解释一下为什么它会像这样工作?

仅使用此代码向我提供解决方案。请不要像使用ng-hide而不是ng-show更改代码,并添加更多额外的div。

1 个答案:

答案 0 :(得分:1)

如果您更改了评论中已经提到的两件事,那么您的代码可以正常工作:

<div ng-app="app">

    <div ng-controller="main">
        <div ng-show="showhide">welcome</div>
        <div my-directive>click</div>
        <div ng-click="submit()">submit</div>
    </div>

</div>

我怀疑你遗漏了宣告你的ng-app

更新代码:

(function(){
    var app = angular.module('app', []);

    app.controller('main', function($scope) {
         $scope.showhide=true;
         $scope.submit=function() {

           //alert($scope.showhide); //true
           $scope.showhide=true;
         };
    });

    app.directive('myDirective',function() {

         return function(scope, elem, attrs) {
            elem.bind('click', function()
            {
                 scope.$apply(function()
                 {
                   scope.showhide = false;    
                 });    
            });
         }
    });
})();

为了使用$apply$scope,您的代码可以正常运行。

http://jsfiddle.net/6xEBW/

我为你写了这个小提琴。