非常简单的ng型手表不工作

Question

这是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看到更改。 请帮忙。 这很容易，但我错过了什么？

Answer 1

将模块创建更改为此，确保不在[]空字符串。 （显然空字符串不是可以注入的模块。）

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

演示： http ： //jsfiddle.net/MWa66/

Answer 2

在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($scope){
    $scope.text = 'Change Me';
    $scope.$watch('text',function(){
        alert('Changed !');
    });
});

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

您可以在此处找到有关手动AngularJS初始化的更多帮助。

Answer 3

谢谢！ 我解决了这个烦人的事情！ 对我有用的解决方案是我使用角度UI路由器，在那里我使用了以下代码

.state('app.monimes', {
      url: "/monimes",
      views: {
        'menuContent' :{
          templateUrl: "templates/monimes.html",
          controller: 'sampleCtrl'
        }
      }
    })

那么在我的控制器中

/ *** * *测试控制器.. * /

.controller('sampleCtrl',['$scope','sampleService', function($scope, $sampleService) {


     $scope.username="em";
       // Watch for changes on the username property.
// If there is a change, run the function

    $scope.$watch('username', function(newUsername) {
        // uses the $http service to call the GitHub API
        // //log it 
        $scope.log(newUsername);
        // and returns the resulting promise
            $sampleService.events(newUsername)
                  .success(function(data, status, headers) {
                              // the success function wraps the response in data
                              // so we need to call data.data to fetch the raw data
                     $scope.events = data.data;
                  });
    },true);
}
]);

在我看来

<div>
     <label for="username">Type in a GitHub username</label>
     <input type="text" ng-model="username" placeholder="Enter a GitHub username, like a user" />
      <pre ng-show="username">{{ events }}</pre>
</div>

但那没用。

所以我在div中添加了ng-controller="sampleCtrl" ，现在它可以工作了：D

这意味着在控制器加载后加载视图并且观察者没有被添加到观察变量中。