当前位置: 首页 > 面试题库 >

如何为AngularJS创建on-change指令?

毋承基
2023-03-14
问题内容

通常,每次用户按下键时,ng-model都会更新绑定模型

<input type="text" ng-model="entity.value" />

在几乎所有情况下,这都非常有效。

但是我需要它在onchange事件发生时进行更新,而不是在onkeyup / onkeydown事件发生时进行更新。

在较旧的angular版本中,有一个ng-model-instant指令,其功能与现在的ng-
model相同(至少对于用户而言,我对它们的实现一无所知)。因此,在较旧的版本中,如果我只是给ng-model它会更新模型onchange,而当我指定ng-
model-instant时它将更新模型onkeypup。

现在,我需要ng-model在元素的“ change”事件上使用。我不希望它是即时的。最简单的方法是什么?

编辑

输入仍然必须反映对模型的任何其他更改-如果将在其他位置更新模型,则输入的值应反映此更改。

我需要的是让ng-model指令可以像在angularjs的旧版本中一样工作。

这是我要做什么的解释:http :
//jsfiddle.net/selbh/EPNRd/


问题答案:

在这里,我为您创建了onChange指令。 演示 :http :
//jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        scope:{'onChange':'=' },
        link: function(scope, elm, attrs) {
            scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
            elm.bind('blur', function() {
                var currentValue = elm.val();
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                }
            });
        }
    };        
});


 类似资料:
  • 问题内容: 我创建了以下AngularJS指令来嵌入YouTube视频: 从模板调用它时,出现以下错误: 错误:[$ interpolate:noconcat]插值时出错:http : //www.youtube.com/embed/ {{code}}严格的上下文转义不允许在需要可信值时连接多个表达式的插值。参见http://docs.angularjs.org/api/ng。$ sce 我无法确

  • 问题内容: 我有以下创建元素的AngularJS指令。输入具有运行功能的属性。在指令的单元测试中,我想检查用户更改输入时是否调用了函数。但是测试没有通过。虽然在手动测试时可以在浏览器中使用。 指示: 测试: 实时演示(ng-change):http : //plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview 现在,如果我手动绑定事件而不是使用属性,则测试通过。

  • 问题内容: 我有一个带有模板的指令 我的指令声明为: 我想在单击某个项目并且其值已经更改时调用。 也就是说,如果我的指令实现为: 我希望在的值已更新时致电。 使用上面给出的代码,可以成功调用,但是将使用旧值而不是新的更新值来调用它。 解决该问题的一种方法是在超时值内部调用超时,以在将来某个时刻执行该超时。但是这种解决方案使我无法控制应该执行的顺序,并且我认为应该有一个更优雅的解决方案。 我也可以在

  • 问题内容: 所以我要创建一个简单的指令“ hover”,这是一个基本的导航菜单,当您将鼠标移到特定的aba上时,此aba会改变颜色。看我的脚本代码: 现在我的HTML: 这工作正常,但是当我以这种方式放置html时: 这是行不通的,我必须用“ hover”标签包裹我的“ li”才能完成这项工作(是的,我正在将strict属性更改为“ A”),为什么呢?还有另一个问题,用“ hover”标签包装我的

  • 问题内容: 如何使用动态模板创建指令? 这就是我现在所拥有的,它可以正确显示标签。但是,我不确定如何在模板上附加其他HTML。或将2个模板合并为1个。 问题答案: 有类似的需求。做这份工作。(不完全确定这是否是“ THE”方法,仍然可以通过角度进行工作) http://jsbin.com/ebuhuv/7/edit-我的探索测试。 需要注意的一件事(以我的示例为例),我的要求之一是,一旦单击“保存

  • 问题内容: 我有这样的设置: 控制器广播事件 指令侦听,然后通过append将其写入DOM,并以此创建指定指令的新元素。 IE浏览器: Angular从未调用过指令 当我检查DOM(并调试)时,我看到Controller 和指令正在执行其工作,并且有新的元素。 什么不见​​了?动态创建这些元素后需要做什么来触发指令调用? 问题答案: 请参阅。您可以类似于以下方式使用此服务: 这将执行新元素的编译和