関数バインディングを使用した角度付き日付ピッカー指示文

私は初心者です。私は戻って（はい、私は酒のために複数のディレクティブを持っているか、各ディレクティブでコールバック関数を繰り返すのではなく、私のコントローラであるjQueryのUIのDatePickerのウィジェットのにonSelectコールバックのコールを1つだけ使用しようとしていますthis plunk 関数バインディングを使用した角度付き日付ピッカー指示文

を修正する助けてください実験の）。

しかし、私はここでは、このエラーに

Uncaught TypeError: Cannot use 'in' operator to search for 'onSelect' in 19/10/2016

を取得するには、私のコードは、誰かが間違っている私がここでやっているものを理解する私を助けることができる

HTML

<html ng-app="myApp"> 
    <head> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/> 
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
     <script src="script.js"></script> 
    </head> 
    <body ng-controller="myController"> 
     <input type="text" my-datepicker ng-model="date" date="date" on-select="onSelect()"/> 
     <input type="button" ng-click="submitDate()" value="Submit"/> 
    </body> 
</html>

JS

var app = angular.module('myApp', []); 
app.controller('myController', ['$scope', function($scope){ 
    $scope.date = "frommyController"; 
    $scope.submitDate = function(){ 
     console.log($scope.date); 
    }; 
    $scope.onSelect = function(value, picker){ 
     scope.date = value; 
     scope.$parent.$digest(); 
    } 
}]); 
app.directive('myDatepicker', function(){ 
    return { 
     scope: { 
      date: "=", 
      onSubmit: "&onSelect" 
     }, 
     restrict: 'EA', 
     require: "ngModel", 
     link: function(scope, element, attributes, modelController){ 
      scope.date = "fromdirevtive"; 
      element.datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: "dd/mm/yy", 
       onSelect: scope.onSubmit 
      }); 
     } 
    } 
})

のですか？代わりに、ディレクトリのディレクトリの下に

出典

2016-10-05 nikhil mehta

私の仕事を訴えることはできません。 –

@chiragpatelあなたの助けを借りていただきありがとうございます。私は、このコールバックは角ではなく外の環境から呼ばれることになっていることを理解しました。これは達成できません。 –

してみてください：あなたにこの意志は役に立ち

app.directive('myDatepicker', function(){ 
    return { 
     scope: { 
      date: "=", 
      onSubmit: "&onSelect" 
     }, 
     restrict: 'EA', 
     require: "ngModel", 
     link: function(scope, element, attributes, modelController){ 
      scope.date = "fromdirevtive"; 
      element.datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: "dd/mm/yy", 
       onSelect:function(date) { 

       scope.$apply(function() { 
        modelController.$setViewValue(date); 
       }); 
      } 
      }); 
     } 
    } 
})

希望。

出典

2016-10-05 10:09:11

複数のディレクティブに複数のコールバックを作成することを避けたいことがあります。 –

@nikhilmehta、更新された回答を確認してください。これは現在あなたのために働いています。私もあなたのプランナーでこれを試して、それはあなたのプランナーでこのコードを置き換えることを確認することができます –

その後、指示の範囲 –

plunkrを使用して新しいplunkrを作成しました。解決方法はplunkerを参照してください。あなたのplunkrで見つけ

問題：

メソッドのシグネチャは、index.htmlの中に誤りがありました。
角度指示文で&バインディングを使用してコールバックを呼び出す方法。

私は上記の問題を修正しました。また、リンク関数を使用する代わりに、ディレクティブとのやりとりに関してより多くの制御を与えるので、ディレクティブに対してコントローラを使用しました。

angleディレクティブでコールバックを呼び出す正しい方法は、オブジェクトを引数として渡すことです。オブジェクトのキーは、コールバック関数のパラメータでなければなりません。以下のようなディレクティブでコールバック関数を呼び出し

：2つのオプション

オプション1を持っているapp.js

Code - app.js

var app = angular.module('myApp', []); app.controller('myController', ['$scope', function($scope) { $scope.date = "frommyController"; $scope.submitDate = function() { console.log($scope.date); }; $scope.onSelect = function(value, picker) { console.log(value); console.log(picker); $scope.date = value; $scope.$parent.$digest(); } } ]); app.directive('myDatepicker', function() { return { scope: { date: "<", onSelect: "&" }, restrict: 'EA', require: "ngModel", controller: function($scope, $element) { vm = this; vm.$scope = $scope; vm.onSelect = function(value, picker) { vm.$scope.onSelect({ value: value, picker: picker }) } $element.datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy", onSelect: vm.onSelect }); } } }) <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="myController"> <input type="text" my-datepicker ng-model="date" date="date" on-select="onSelect(value,picker)" /> <input type="button" ng-click="submitDate()" value="Submit" /> </body> </html>

出典

2016-10-05 17:07:05

の行番号27を参照してください。：

var app = angular.module('myApp', []); 
app.controller('myController', ['$scope', function($scope){ 
    $scope.date = "frommyController"; 
    $scope.submitDate = function(){ 
     console.log($scope.date); 
    }; 
    $scope.onSelect = function(value, picker){ 
     alert(''); 
     scope.date = value; 
     scope.$parent.$digest(); 
    } 
}]); 
app.directive('myDatepicker', function(){ 
    return { 
     scope: { 
      date: "=", 
      onSubmit: "&onSelect" 
     }, 
     restrict: 'EA', 
     require: "ngModel", 
     link: function(scope, element, attributes, modelController){ 
      scope.date = "fromdirevtive"; 
      element.datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: "dd/mm/yy", 
       onSelect: function(){scope.$apply(function() { 
        scope.onSubmit(); 
       }); } 
      }); 
     } 
    } 
})

オプション2：あなたの親コントローラにいくつかのものを行うには

使用パブリッシャー/サブスクライバモデル..以下のように

var app = angular.module('myApp', []); 
app.controller('myController', ['$scope', function($scope){ 
    $scope.date = "frommyController"; 
    $scope.submitDate = function(){ 
     console.log($scope.date); 
    }; 

    $scope.$on('event',function() 
    { 
     alert('listener'); 
     scope.date = value; 
     scope.$parent.$digest(); 
    }); 

}]); 
app.directive('myDatepicker', function(){ 
    return { 
     scope: { 
      date: "=" 
     }, 
     restrict: 'EA', 
     require: "ngModel", 
     link: function(scope, element, attributes, modelController){ 
      scope.date = "fromdirevtive"; 
      element.datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: "dd/mm/yy", 
       onSelect: function(){scope.$apply(function() { 
        console.log(scope) 
        scope.$emit('event') 
       });} 
      }); 
     } 
    } 
})

出典

2016-10-05 17:44:52

関数バインディングを使用した角度付き日付ピッカー指示文

答えて

関連する問題