Угловая директива о дампинге с функцией привязки

Я начинаю с углового. Пожалуйста, помогите мне исправить this plunk Угловая директива о дампинге с функцией привязки

Я пытаюсь использовать только один вызов обратно для onSelect обратного вызова JQuery UI Datepicker виджет, который находится в моем контроллере вместо того чтобы повторять функцию обратного вызова в каждой директивы (да у меня есть несколько директив для ради эксперимента).

Но я получаю эту ошибку

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 благодарит за помощь в хираге. Я понял, что, поскольку этот обратный вызов предполагается вызывать из внешней среды, а не из-за углового. Это невозможно. –

Try ниже каталога, вместо каталога:

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, проверьте обновленный ответ, теперь это работа для вас. Я также пробую это в вашем плункере, и он работает, вы можете проверить замену этого кода в своем плунжере –

, тогда нет необходимости проходить через SubSmit в область действия директивы –

У меня есть новый plunkr, использующий ваш plunkr. Обратитесь к этому решению plunker.

Проблема, найденная с plunkr:

Метода подпись неверна в index.html.
Способ вызова обратного вызова с привязкой & в угловой директиве.

Я только что исправил вышеуказанные проблемы. Кроме того, вместо использования функции ссылки я использовал контроллер для директивы, поскольку он дает мне больше контроля в плане взаимодействия с директивой.

Правильный способ вызова обратного вызова в угловой директиве заключается в передаче объекта в качестве аргумента. Ключом объекта должен быть параметр функции обратного вызова. См номер строки 27 из 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

У вас есть два варианта

Вариант 1:

Вызов вашей функции обратного вызова в директиве, как показано ниже :

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

Угловая директива о дампинге с функцией привязки

ответ

Смежные вопросы