Question

我正在尝试用角度

的css创建iphone风格的Toggle Button

但问题是第一次没有评估动态按钮文本变量“{{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>

Answer 1

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

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

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

这会在您致电render()以设置$scope值之前设置初始值。

Answer 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

Answer 3

当指令首次运行时，尚未插入属性。

使用的解决方案是$ timeout

以下是Working 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);            
    }
  };
});

Angular指令动态按钮文本变量未评估？

3 个答案: