Question

我有以下代码：

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js">    </script>    
</head>
<body>
<script>
var app = angular.module("sampleApp", ["firebase"]);

        // let's create a re-usable factory that generates the $firebaseAuth instance
    app.factory("Auth", ["$firebaseAuth",
      function($firebaseAuth) {
        var ref = new Firebase("https://xxxxx.firebaseio.com/?page=Auth");
        return $firebaseAuth(ref);
      }
    ]);

    // and use it in our controller
    app.controller("SampleCtrl", ["$scope", "Auth",
      function($scope, Auth) {
        $scope.createUser = function() {
          $scope.message = null;
          $scope.error = null;

          Auth.$createUser({
            email: $scope.email,
            password: $scope.password
          }).then(function(userData) {
            $scope.message = "User created with uid: " + userData.uid;
          }).catch(function(error) {
            $scope.error = error;
          });
        };

        $scope.removeUser = function() {
          $scope.message = null;
          $scope.error = null;

          Auth.$removeUser({
            email: $scope.email,
            password: $scope.password
          }).then(function() {
            $scope.message = "User removed";
          }).catch(function(error) {
            $scope.error = error;
          });
        };
      }
    ]);
  </script>
      <div ng-app="sampleApp" ng-controller="SampleCtrl">
               Email: <input type="text" ng-model="email">
               Password: <input type="text" ng-model="password">

  <br><br>

  <button ng-click="createUser()">Create User</button>

  <br><br>

  <button ng-click="removeUser()">Remove User</button>

  <p ng-if="message">Message: <strong>{{ message }}</strong></p>
  <p ng-if="error">Error: <strong>{{ error }}</strong></p>

</div>
</body>
</html>

无论出于何种原因，Javascript都无法运行。我觉得我错过了一些非常明显的东西。

从AngularFire教程中复制并粘贴代码。

有什么想法吗？

谢谢！

Answer 1

同一页面上的多个ng-app无法正常工作。 Angular只会编译第一个ng-app其他ng-app指令将被忽略。您在页面上两次提到ng-app，从html标记中删除一个将启动您的应用程序。

<强>标记

<div ng-app="sampleApp" ng-controller="SampleCtrl">
    Email:
    <input type="text" ng-model="email"> Password:
    <input type="text" ng-model="password">

    <br/>
    <br/>

    <button ng-click="createUser()">Create User</button>

    <br/>
    <br/>

    <button ng-click="removeUser()">Remove User</button>

    <p ng-if="message">Message: <strong>{{ message }}</strong></p>
    <p ng-if="error">Error: <strong>{{ error }}</strong></p>

</div>

另类

但是，通过使用angular.bootstrap()功能，您可以在同一页面上使用多个AngularJS应用而不使用ng-app。

正如the docs page for ng-app

所述

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。 AngularJS应用程序不能互相嵌套。

AngularJS代码不起作用

1 个答案: