3

我正在尝试使用 angular 中的 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(" ");
            open.removeClass('btnOffSelected');  
          }
          else{
              open.html(open.attr("text")); 
              open.addClass('btnOffSelected');  
              closed.removeClass('btnOnSelected');  
              closed.html(" ");
          }
        };
        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>
4

3 回答 3

2

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

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

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

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

于 2013-09-04T08:19:41.210 回答
1

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

我建议使用 $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

于 2013-09-04T16:31:40.807 回答
0

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

使用的解决方案是 $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);            
    }
  };
});
于 2013-09-21T09:47:16.733 回答