AngularJS- 基礎Controller

繼續Angular，接下來看基礎controller。

首先用一個div把先前的html包起來。

view plaincopy to clipboardprint

1. <div ng-controller="firstCtrl">  
2. </div>  

裡面的ng-controller="firstCtrl"，就是之後要呼叫controller的名稱，先建一隻新的js檔來放controller的code。

view plaincopy to clipboardprint

1. <script src="js/controller.js"></script>  

建一個跟先前ng-controller名字一樣的function

view plaincopy to clipboardprint

1. function firstCtrl($scope){   
2.     $scope.data= {message: "Hello"};       
3. }  

然後改寫一下html

view plaincopy to clipboardprint

1. <div ng-controller="firstCtrl">      
2.     <p> {{data.message +" " +yourName }}!</p>     
3.     <label>Name: </label>     
4.     <input type="text" ng-model="yourName" placeholder="Enter a name here">    
5. </div>   

這樣就可以用controller來控制html的東西了。
Demo

不過如果是兩個分開的controller，要能夠接一樣的值

view plaincopy to clipboardprint

1. <div ng-app="myApp">  
2.         <div ng-controller="FirstCtrl">  
3.             <input type="text" ng-model="data.message">  
4.             <h1>{{data.message}}</h1>  
5.         </div>  
6.         <div ng-controller="SecondCtrl">  
7.             <input type="text" ng-model="data.message">  
8.             <h1>{{data.message}}</h1>  
9.         </div>  
10. </div>  

可以這樣用

view plaincopy to clipboardprint

1. var myApp = angular.module('myApp', []);   
2. myApp.factory('Data', function () {   
3.     return {message:"Hello!"};   
4. });   
5.   
6. function FirstCtrl($scope, Data) {   
7.     $scope.data = Data;   
8. }   
9.   
10. function SecondCtrl($scope, Data) {   
11.     $scope.data = Data;   
12. }  

加一點變化，讓輸入的值反過來

view plaincopy to clipboardprint

1. $scope.reversedMessage = function (message) {   
2.     return message.split("").reverse().join("");   
3. };  

Demo