AngularJS- 基礎Controller



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

首先用一個div把先前的html包起來。
  1. <div ng-controller="firstCtrl">  
  2. </div>  

裡面的ng-controller="firstCtrl",就是之後要呼叫controller的名稱,先建一隻新的js檔來放controller的code。
  1. <script src="js/controller.js"></script>  

建一個跟先前ng-controller名字一樣的function
  1. function firstCtrl($scope){   
  2.     $scope.data= {message: "Hello"};       
  3. }  

然後改寫一下html
  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,要能夠接一樣的值
  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>  

可以這樣用
  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. }  

加一點變化,讓輸入的值反過來
  1. $scope.reversedMessage = function (message) {   
  2.     return message.split("").reverse().join("");   
  3. };  

Demo

留言

熱門文章