【问题标题】:Difference between on-change and ng-changeon-change 和 ng-change 的区别
【发布时间】:2016-11-17 15:39:25
【问题描述】:

下面是一个非常简单的表单下拉列表设置。但是,on-change 事件拒绝触发...除非它更改为 ng-change

这让我停留了大约一个小时,因为我们在网站的其他地方使用相同的设置(即模型属性/列表/on-change 指令)没有失败。

我想知道on-changeng-change 之间的区别是什么,为什么一个在这种情况下有效而另一个无效?

查看

<select id="grArchive"
        name="grArchive"
        class="form-control"
        options="userList"
        ng-model="selectedUser"
        ng-options="user as user.name for user in userList"
        on-change="showSelected()">
</select> 

控制器

scope.selectedUser = {};
scope.userList = [];

scope.showSelected = function(){
    scope.columns = addColumns;
};

var loadUserList = function(data){
    scope.userList = $.map(data, function(item){
            return {id: item.id, name: item.firstName + ' ' + item.lastName};
        });
}

以防万一:用户下拉菜单按预期填充(下面的屏幕截图)

【问题讨论】:

    标签: javascript angularjs events data-binding angularjs-directive


    【解决方案1】:

    ng-改变

    ng-change 是 Angular 核心 API 提供的指令,它在内部注册一个表达式,当ng-model 变量的$viewValue 发生任何变化时调用(here 是代码);为其分配一个表达式,例如myFunction()。提供的表达式将在底层控制器范围内进行评估。在调用一个表达式后,它会运行一个摘要循环以确保在视图上更新绑定。除了ng-change 之外,还有其他用于事件的指令,如ng-focusng-mousedownng-submitng-blur 等。Here 是此类指令的列表

    变化中

    这是一种在输入元素值的change 上调用JavaScript 函数的方法。它将搜索在上下文中全局可用的function(显然它不会调用在角度控制器中注册的函数)并对其进行评估。

    【讨论】:

    • 人们说“老方法”很有趣。那么新的方法是什么?
    • @Misters 哦,我的错,我不是故意添加的,我删除了old 字。 :(
    • github.com/angular/angular.js/blob/… 它本身不绑定任何事件
    • @PetrAveryanov 您部分正确,感谢您的提醒。其实其他事件都是这样处理的,here你可以看。
    • 我说的部分是因为,如果你看看$viewChangeListner 是如何调用注册的监听器的,那么你就会间接地理解它确实在change 事件上调用了注册监听器。基本上有一个input 更改事件,它确实调用了$setViewValue 方法来更新$viewValue,它调用一种方法将$viewValue 设置为$modelValue,在这之间它调用$commitValue 方法来更改@ 987654344@ 在该方法中仅调用$viewChangeListner 的侦听器。
    猜你喜欢
    • 2016-11-15
    • 2013-12-07
    • 1970-01-01
    • 1970-01-01
    • 2023-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-14
    相关资源
    最近更新 更多