Question

码

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

您的JavaScript文件在AngularJS初始化后加载，这就是它无法找到您的模块的原因。为了解决这个问题，请将初始化更改为手动初始化。

首先更改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初始化here上找到更多帮助。

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>

但这不起作用。

所以我添加了ng-controller="sampleCtrl" 到了div，现在它起作用了：D

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

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

3 个答案: