4

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

4

3 回答 3

6

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

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

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

于 2013-09-16T21:34:37.597 回答
3

您的 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 初始化的更多帮助。

于 2013-09-16T22:14:31.303 回答
1

谢谢！我解决了这个烦人的事情！对我有用的解决方案是我使用角度 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

所以这意味着在控制器加载之后加载视图并且观察者不会被添加到观察变量中。

于 2014-12-03T12:12:17.160 回答