AngularJS ng-控制器在引導後不起作用

Question

當我將ng-controller添加到任何div時，{{ }}就像這樣呈現。

<div id="1"> 
<div class="ExplorerApp"> 
    <div> 
     First Name: <input type="text" ng-model="firstName"><br> 
     Last Name: <input type="text" ng-model="lastName"><br> 
     <br> 
     Full Name: {{firstName + " " + lastName}} 
    </div> 
    <div class="NavigationPane" ng-controller="ExplorerController"> 
     <div>Pane data: {{myData.test}}</div> 
    </div> 
</div> 
</div> 

第一個div工作正常，但第二個沒有。以下是我的js代碼：

 var app = angular.module('Explorer', []); 
     angular.bootstrap(document.getElementById("1"), ["Explorer"]); 

     app.controller("ExplorerController", function ($scope) { 
      $scope.myData = {}; 
      $scope.myData.test = "Hello Angular"; 
     }); 

Answer 1

你有兩個問題。

第一個是爲getElementById提供的id選擇器不正確，它應該沒有#字符（並且最好避免使用數字id，儘管它也可以）。或者，如果您使用#1，則可以使用document.querySelector('#1')。

第二個問題是您需要在模塊之後引導應用程序並創建所有服務和控制器。在你的情況下，你在做create app -> bootstrap -> create controller，而它應該是create app -> create controller -> bootstrap。

正確的代碼：

var app = angular.module('Explorer', []); 
app.controller("ExplorerController", function ($scope) { 
    $scope.myData = {}; 
    $scope.myData.test = "Hello Angular"; 
}); 

angular.bootstrap(document.getElementById("1"), ["Explorer"]); 

演示：http://plnkr.co/edit/eTvbTkUeFkDj0Bkye0qc?p=preview

Answer 2

使用ng-app="Explorer"。

的index.html

<div ng-app = "Explorer"> 
    <div class="ExplorerApp"> 
    <div> 
     First Name: <input type="text" ng-model="firstName"><br> 
     Last Name: <input type="text" ng-model="lastName"><br> 
     <br> 
     Full Name: {{firstName + " " + lastName}} 
    </div> 
    <div class="NavigationPane" ng-controller="ExplorerController"> 
     <div>Pane data: {{myData.test}}</div> 
    </div> 
</div> 
</div> 

JavaScript文件：

var app = angular.module('Explorer', []); 
     angular.bootstrap(document.getElementById(self._compID), ["Explorer"]); 

     app.controller("ExplorerController", function ($scope) { 
      $scope.myData = {}; 
      $scope.myData.test = "Hello Angular"; 
     }); 

看看我的代碼中的jsfiddle。 http://jsfiddle.net/parthipans/5DMjt/1453/