TypeError: element.change is not a function

Question

我的指令是这样的

'use strict';  
angular.module('WebApp').directive('someAppFormat', function ($filter, $timeout) {   
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
    //Functions            
        element.change(function () {
            //Do Something...
        });

我收到以下错误：

angular.js:12722 TypeError: element.change is not a function
at link (http://localhost/webApp/Scripts/AngularJs/Directives/someAppDirectives.js?v17.0.2.0.2:61:17)
at invokeLinkFn (http://localhost/webApp/Scripts/angular.js:9039:9)
at nodeLinkFn (http://localhost/webApp/Scripts/angular.js:8533:11)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7929:13)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7932:13)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7932:13)
at publicLinkFn (http://localhost/webApp/Scripts/angular.js:7809:30)
at boundTranscludeFn (http://localhost/webApp/Scripts/angular.js:7947:16)
at controllersBoundTransclude (http://localhost/webApp/Scripts/angular.js:8560:18)
at ngRepeatAction (http://localhost/webApp/Scripts/angular.js:27921:15) <input type="text"  
class="someAppValidatorSpan ng-pristine ng-untouched ng-valid" id="someAppPercentInput" 
name="someAppPer{{$index + 1}}" ng-model="someAppVm.someAppPercentages[$index]" 
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 20000, 'blur': 0 } }" 
someApp-format="">

我相信 element.change（函数）是一个合法的函数，我的问题在别处。我可以缺少一些依赖吗？

Answer 1

不要只是相信，阅读它。 =)

AngularJS element does not have a change function & https://docs.angularjs.org/guide/directive

Element is the jqLite-wrapped element that this directive matches

您可以使用 jqLite Methode on() 来完成这项工作。这样你就不需要混合 jQuery 和 AngularJS.

link: function (scope, element, attrs, ctrl) {
    element.on('change', function () {
        //all your goodness
    });
}

Answer 2

除非您在页面中包含 jQuery.js，并且在 angular.js 之前包含它，否则 angular.element 没有 change() 方法

使用 bind() 或更新版本 on()

link: function (scope, element, attrs, ctrl) {

        element.bind('change', function () {
            //Do Something...
        });
        // or 
        element.on('change', function () {
            //Do Something...
        });


}

或者您可以使用 ng-change

Answer 3

在您的指令 link 函数中，您将元素作为 "element" 传递，但在您尝试引用的函数中 "elm" 未根据我所见定义. Angular 元素没有其他人所说的更改功能，但您需要引用 "element"，而不是 "elm"。

'use strict';  
angular.module('WebApp').directive('someAppFormat', function ($filter, $timeout) {   
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
    //Functions            
        element.on('change', function () {
            //Do Something...
        });

TypeError: element.change is not a function

TypeError: element.change is not a function

jquery

directive

angularjs

不要只是相信，阅读它。 =)

您可以使用 jqLit​​e Methode on() 来完成这项工作。这样你就不需要混合 jQuery 和 AngularJS.

您可以使用 jqLite Methode on() 来完成这项工作。这样你就不需要混合 jQuery 和 AngularJS.