3

angularのcssでiphoneスタイルのトグルボタンを作成しようとしています

しかし、問題は動的ボタンテキスト変数が初めて評価されないことです "{{v1['btn2']}}" が、静的テキストで正常に動作します

jsFiddle の URL:

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

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 に答える