如何訪問Angular.js中的控制器

我正在使用Angular.js創建應用程序，但我的index.html文件似乎沒有訪問我的controller.js文件。瀏覽器打印出像這樣在大括號中的變量：{{} friend.name}，{{friend.number}}如何訪問Angular.js中的控制器

這裏是我的html文件：

<!DOCTYPE HTML> 
<html ng-app> 
    <head> 
     <title>Angular Directives</title> 
    </head> 

    <body> 
     <div class="container" ng-controller="demoController"> 
      <h1>Angular Directives</h1> 
      <h2>ng-model example: two-way binding and $scope</h2> 
      <h3>Name</h3> 
      <input type="text" ng-model="name"> 
      <br /> 
      Hello, {{name}}! 
      <h2>ng-repeat example</h2> 
      <ul> 
       <li ng-repeat="friend in friends">{{friend.name}}, {{friend.number}}</li> 
      </ul> 
     </div> 
    </body> 

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    <script src = "controller.js"></script> 
</html>

這是我的controller.js文件：

var demoController = function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
     name: "Tim Thompson", 
     number: "111-111-1111" 
    }; 

    var friend2 = { 
     name: "Sally Smith", 
     number: "222-222-2222" 
    }; 

    var friend3 = { 
     name: "Billy Bob", 
     number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}

來源

2015-07-11 Kristine Rooks

你正在使用哪種角度版本？或任何控制檯錯誤？ – Vineet

在ng-app中輸入你的模塊名稱 –

您需要將其作爲模塊包含並在代碼中指定模塊。所以像這樣的東西。

angular.module("exampleApp", []) 
.controller("demoController", function($scope) { 
$scope.name = "John Doe"; 

var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
}; 

var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
}; 

var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
}; 

var friends = [friend1, friend2, friend3]; 
$scope.friends = friends;

}）;

然後設置ng-app="exampleApp"和你的代碼應該工作。

編輯：我剛剛意識到我的原始解釋可能不清楚。我的意思是角度有一個模塊系統。模塊是您連接控制器的地方。所以當你添加ng-app="exampleApp"時，角度會看到這個，看到你想從exampleApp模塊中取出控制器。所以你需要指定那是你想要在代碼中使用的模塊，並且你將demoController控制器連接到該特定模塊。

來源

2015-07-11 19:15:34 OceansOnPluto

每個Angular應用程序都需要至少一個控制器，服務，工廠和指令等將連接到的模塊。你似乎錯過了這個，因此你的控制器不起作用。

首先創建一個模塊是這樣的：

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

的[]在這裏你可以注入其他模塊爲您的應用。如ngRoute,ngAnimate或您自己的子模塊。

你已經創建你需要告訴你的應用程序要使用的模塊，該模塊後，你做這個通過ngApp指令，通常設置在html標籤：

<html ng-app="myApp">

記住，ngApp接受名，而不是它存儲的變量。因此它將是myApp而不是myModule。

然後，你需要你的控制器掛鉤這個模塊，您可以通過簡單的設置來實現：

myModule.demoController = function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
    }; 

    var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
    }; 

    var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}

作爲一個額外的小費它也建議使用陣列註釋讓你的應用程序不打破縮小。因此，改變你的控制器看起來像這樣：

myModule.demoController(['$scope', function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
    }; 

    var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
    }; 

    var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}]);

現在，您將注入你的依賴作爲函數的參數和內部''馬克在數組中。

現在，您可以開始在控制器中編寫內容，並且它們將在您的頁面上可見。

來源

2015-07-11 19:22:29 Chrillewoodz

您必須將控制器綁定到您的應用程序/模塊。它看起來並不像你已經創建了一個Angular應用程序（documentation）。

您應該可能會創建另一個.js文件模糊遵循以下格式來創建應用程序。請注意，您也可以在創建控制器之前在與控制器相同的文件中執行此操作。結尾處的空方括號表示您要注入的任何其他Angular依賴項，例如Angular Material Design，但因爲它看起來不像您的代碼使用任何代碼，所以我們將它留空。然後，您需要修改控制器代碼，將控制器綁定到您的Angular模塊，方法是將此代碼放在當前控制器功能代碼之後。（documentation）。

app.controller("demoController", demoController)

最後，讓你的HTML頁面加載角模塊和控制器，你需要把ng-app="MyAppName"標籤在你的代碼上demoController的父元素之一。通常，這是放在開頭<html>或<body>標籤上。所以，你可以改變你的首頁標籤以符合以下內容：

<body ng-app="MyAppName">

來源

2015-07-11 19:22:50 andrewgu

如何訪問Angular.js中的控制器

回答

相關問題