2016-05-25 3 views
0

2ウェイバインディングを使用しているときに問題があります。入力を変更すると、コントローラに変更が反映されます。コントローラからの最初のinitは指令に影響します。指示文をコントローラにバインドする方法

私は値を変更しましたが、vm.dateにはまだ値のテストがあります。

私のディレクティブ:

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

     //Template 
     var template = function (element, attrs) { 

      htmltext = 

       '<input ng-readonly="true" type="text" id="' + attrs.elementId + 
       '" ng-model="' + attrs.model + '" type="date" />'; 

      return htmltext; 

     } 

     //Manipulation 
     var link = function ($scope, elements, attrs, ctrls) { 

      //Declare variables we need 
      var el = '#' + attrs.elementId + ''; 
      var m = attrs.model; 
      var jdate; 
      var date; 
      $scope[attrs.model] = []; 

      $(el).on('change', function (v) { 
       jdate = $(el).val(); 
       gdate = moment(jdate, 'jYYYY/jMM/jDD').format('YYYY-MM-DD'); 
       if (moment(gdate, 'YYYY-MM-DD', true).isValid()) { 
        date = new Date(gdate); 

        $scope[m][0] = date; 
        $scope[m][1] = jdate; 
        //console.log($scope[m]); 
        $scope.vm[m] = $scope[m]; 

        console.log($scope.vm); //----> Here Console Write Right Data 

       } else { 
        //console.log('Oh, SomeThing is Wrong!'); 
       } 

      }); 

     } // end of link 
     return { 
      restrict: 'E', 
      scope: {vm: '='}, 
      template: template, 
      link: link 
     }; 

    }); 
}(angular.module('app'))); 

と私のコントローラ:

(function (app) { 
    app.controller('test', ['$scope', function ($scope) { 
     var vm = this; 
     vm.date = 'test'; 
     vm.mydate = 'test2'; 
    }]); 
}(angular.module('app'))); 

とhtml:

<body ng-app="app"> 

    <div ng-controller="test as vm"> 

     <date-picker element-id="NN" model="vm.date" vm="vm"></date-picker> 
     <p>{{vm.date}}</p> 

     <date-picker element-id="NN2" model="vm.mydate" vm="vm"></date-picker> 
     <p>{{vm.mydate}}</p> 

    </div> 
</body> 
+0

HTMLでvmを印刷できますか?直後のng-controller add {{vm}} –

+0

はい私はvmを見ることができますが、vm.dateなどが必要な場合は、私が言った結果を表示してください。 – data

+0

あなたのコントローラーに 'date'プロパティーがあり、' vm.date'プロパティーはありません。 – zeroflagL

答えて

0

の答えのためのフィドルです:

あなたのコントローラは、日付のプロパティではなく、vm.date性質を持っています。 - zeroflagL 5月25日13:48

-1

この代わりにvmを$ scopeに定義する必要があります。

var vm = $scope; 
+0

私はそれが影響するはずだとは思わないです –

+0

@psychodramatic | 'var vm = this;'は 'var vm = $ scope;'と同じです – data

0

私はあなたが読み取り専用としてテキストボックスを作った理由はわからないが、あなたはそれを読み取り専用削除し、テキストボックスに、2つの方法で結合作品を更新しようとした場合。ここではその

https://fiddle.jshell.net/dzfe50om/

+0

あなたのコードをチェックしましたが、私は第三者のスクリプトでバインドされた値を変更する必要があります、私は – data

+0

編集していただきありがとうございます入力は読み取り専用です。だから別の解決策がありますか? – data

+0

詳細については、私はdatepickerに取り組んでいます。そして、私は(JQueryカレンダー) – data

関連する問題