角度指令动态按钮文本变量未评估？答案

【问题标题】：Angular directive dynamic button text variable not evaluated?角度指令动态按钮文本变量未评估？
【发布时间】：2013-09-04 07:24:37
【问题描述】：

我正在尝试用 angular 中的 css 创建 iphone 风格的切换按钮

但问题是动态按钮文本变量第一次未评估 "{{v1['btn2']}}" ，但与静态文本一起工作正常

jsFiddle 的网址：

http://jsfiddle.net/vishalvasani/z5SNc/3/

下面是我的代码：

angular.module('test').controller('myctrl', function($scope){
    $scope.v1={
        "status":"1",
        "btn1":"On",
        "btn2":"Off"
    }
     $scope.v2={
        "status":"1"
     }
});

angular.module('test').directive('btnSwitch', function(){

  return {
    restrict : 'AE',
    require :  'ngModel',
    link : function(scope, element, attrs, ngModel){
        ngModel.$render = function() {
          render();
        };
        var render=function(){
          var val = ngModel.$viewValue; 

          var open=angular.element(element.children()[0]);

          var closed=angular.element(element.children()[1]);
          if(val)
          {
            closed.html(closed.attr("text"));
            closed.addClass('btnOnSelected');  
            open.html("&nbsp;");
            open.removeClass('btnOffSelected');  
          }
          else{
              open.html(open.attr("text")); 
              open.addClass('btnOffSelected');  
              closed.removeClass('btnOnSelected');  
              closed.html("&nbsp;");
          }
        };
        element.bind('click', function() {
          scope.$apply(toggle);             
        });
        function toggle() {
           var val = ngModel.$viewValue;
           ngModel.$setViewValue(!val); 
           render();          
        } 
        if(!ngModel){  

          return;          
        }  
         render();
    }
  };
});

HTML：

<div ng-app="test">
    <div ng-controller="myctrl">
        <div class="pull-left" btn-switch ng-model="v1['status']">
            <div class="pull-left btnCS btnOff" text="{{v1['btn1']}}">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="{{v1['btn2']}}"></div>
        </div>
        <div class="clearFix" style="height:20px"></div>
        <hr />
         <div class="pull-left" btn-switch ng-model="v2['status']">
            <div class="pull-left btnCS btnOff" text="On">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="Off"></div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript css button angularjs directive

【解决方案1】：

看来您需要第一次初始化该值。这是一个更新的小提琴：http://jsfiddle.net/sHZdg/。

我在您的指令末尾添加了这两行：

var val = ngModel.$viewValue;
ngModel.$setViewValue(val);

这将在您调用render() 设置$scope 值之前设置初始值。

【讨论】：

我已经检查并放置了 console.log() 并且 ngModel.$viewValue 的初始值是 NaN，你能检查这个 url @jsfiddle.net/vishalvasani/sHZdg/1 为什么值是 NaN？
是的，你的权利。我也不确定。有时间我会去看看。事实上，如果我将代码更改为：ngModel.$setViewValue(NaN); 它也可以。 :)

【解决方案2】：

指令第一次运行时，还没有插入属性。

我建议使用 $eval 而不是 {{}}s：

<div class="pull-left btnCS btnOff"              text="v1['btn1']">&nbsp;</div>
<div class="pull-left btnCS btnOn btnOnSelected" text="v1['btn2']"></div>

closed.html(scope.$eval(closed.attr("text")));
...
open.html(scope.$eval(open.attr("text")));

fiddle

【讨论】：

【解决方案3】：

指令第一次运行时，还没有插入属性。

使用的解决方案是 $timeout

下面是工作 jsfiddle：

Working Demo

HTML 部分

<div ng-app="test">
    <div ng-controller="myctrl">
        <div class="pull-left" btn-switch ng-model="v1['status']">
            <div class="pull-left btnCS btnOff" text="{{v1['btn1']}}">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="{{v1['btn2']}}"></div>
        </div>
        <div class="clearFix" style="height:20px"></div>
        <hr />
         <div class="pull-left" btn-switch ng-model="v2['status']">
            <div class="pull-left btnCS btnOff" text="On">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="Off"></div>
        </div>
    </div>
</div>

控制器代码：

angular.module('test', []);
angular.module('test').controller('myctrl', function($scope){
    $scope.v1={
        "status":"1",
        "btn1":"On",
        "btn2":"Off"
    }
     $scope.v2={
        "status":"1"
     }
});

指令代码：

angular.module('test').directive('btnSwitch', function($timeout){

  return {
    restrict : 'AE',
    require :  'ngModel',
    link : function(scope, element, attrs, ngModel){


        ngModel.$render = function() {
          render();
        };

        var render=function(){
          var val = ngModel.$viewValue; 
            console.log(val);          
          var open=angular.element(element.children()[0]);

          var closed=angular.element(element.children()[1]);
          if(val)
          {
            closed.html(closed.attr("text"));
            closed.addClass('btnOnSelected');  
            open.html("&nbsp;");
            open.removeClass('btnOffSelected');  
          }
          else{
              open.html(open.attr("text")); 
              open.addClass('btnOffSelected');  
              closed.removeClass('btnOnSelected');  
              closed.html("&nbsp;");
          }
        };


        element.bind('click', function() {
          scope.$apply(toggle);             
        });


        function toggle() {
           var val = ngModel.$viewValue;
           ngModel.$setViewValue(!val); 
           render();          
        } 

        if(!ngModel){  

          return;          
        }  
        //console.log(ngModel.$viewValue)
        $timeout(function(){
            //var val = ngModel.$viewValue;
            //ngModel.$setViewValue(val);
            render();
        }, 0);            
    }
  };
});

【讨论】：