javascript - 引导后 AngularJS ng-controller 不工作

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')。

第二个问题是您需要在 模块和所有服务和 Controller 创建之后引导应用程序。在您的情况下，您正在执行 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