Angular js 绑定与普通 html 元素

Angular js binding with normal html element

本文关键字:html 元素 js 绑定 Angular      更新时间:2023-09-26

我正在尝试angularjs binding功能。我有一个场景,我在"ng-app"标签中有一个表单标签

<form name="CollectMFPToEvaluate" >
    <input type="text" name="name" ng-model="risk.name" ng-show="false">
</form>

在我的应用程序中.js文件中,我正在编写一个工厂,它将调用一个普通的javascript函数来设置名称字段的值

angularApp.factory('NameFactory', function(){
 return {
    bodyLoaded:function(){
       collectName();
    },
}; 
});
var collectName = function(){
    document.CollectMFPToEvaluate.name.value = "stackoverflow"; 
};

在应用程序中调用我的工厂后.js我尝试访问 name 变量应用.js

$scope.risk = {
        name : '',
};
NameFactory.bodyLoaded();
     alert("risk = "+$scope.risk.name);

我预计警报会打印"风险 = 堆栈溢出",但它打印"风险 ="。我错过了什么,如果是这样,任何人都可以纠正我。

谢谢

由于您直接更新了视图值,因此您需要告诉角度世界您已经更新了视图。如果您在工厂中运行应用程序,则应修复它。看看角度示波器

angularApp.factory('NameFactory', function( $rootScope ){
   return {
      bodyLoaded:function(){
        $rootScope.$apply( collectName() );
      }
    }; 
});