angularjs – 非常简单的ng-model手表无法正常工作

发布时间：2020-12-17 17:55:35 所属栏目：安全来源：网络整理

导读：这是jsfiddle. http://jsfiddle.net/CLcfC/ 码 var app = angular.module('app',['']);app.controller('TestCtrl',function($scope){ $scope.text = 'Change Me'; $scope.$watch('text',function(){ alert('Changed !'); });}) HTML script src="http://ajax

这是jsfiddle.
http://jsfiddle.net/CLcfC/

码

var app = angular.module('app',['']);

app.controller('TestCtrl',function($scope){
    $scope.text = 'Change Me';
    $scope.$watch('text',function(){
        alert('Changed !');
    });


})

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="app">
 <div ng-controller="TestCtrl">
     <input type="text" ng-model='text'/>
     <span>{{text}}</span>
  </div> 
</div>

我无法在$scope.text中看到更改.请帮忙.
这很容易,但我错过了什么？

解决方法

在AngularJS初始化之后加载您的JavaScript文件,这就是它无法找到您的模块的原因.为了修复它,将初始化更改为手动初始化.

首先更改HTML并删除ng-app指令：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div id="appRoot">
 <div ng-controller="TestCtrl">
     <input type="text" ng-model='text'/>
     <span>{{text}}</span>
  </div> 
</div>

然后转到JavaScript并使用angular.bootstrap方法手动附加模块：

var app = angular.module('app',[]);

app.controller('TestCtrl',function(){
        alert('Changed !');
    });
});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('appRoot'),['app']);
});

您可以在手动AngularJS初始化here上找到更多帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!