angularjs單頁面多Controller示例
阿新 • • 發佈：2019-02-04
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular Multiple Controllers demo</title> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="firstController"> <h2>Model managed by the first controller</h2> <strong>First name:</strong> {{firstName}}<br /> <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName" /></label><br /> <label>Set the last name: <input type="text" ng-model="lastName" /></label> </div> <div ng-controller="secondController"> <h2>Model managed by the second controller</h2> <strong>First name:</strong> {{firstName}}<br /> <strong>Middle name:</strong> {{middleName}}<br /> <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName" /></label><br /> <label>Set the middle name: <input type="text" ng-model="middleName" /></label><br /> <label>Set the last name: <input type="text" ng-model="lastName" /></label> </div> <script> var myApp = angular.module("app", []); myApp.controller("firstController", function ($scope) { // Initialize the model variables $scope.firstName = "John"; $scope.lastName = "Doe"; // Define utility functions $scope.getFullName = function () { return $scope.firstName + " " + $scope.lastName; }; }); myApp.controller("secondController", function ($scope) { // Initialize the model variables $scope.firstName = "Bob"; $scope.middleName = "Al"; $scope.lastName = "Smith"; // Define utility functions $scope.getFullName = function () { return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName; }; }); //var firstController = function ($scope) { // // Initialize the model variables // $scope.firstName = "John"; // $scope.lastName = "Doe"; // // Define utility functions // $scope.getFullName = function () { // return $scope.firstName + " " + $scope.lastName; // }; //}; //var secondController = function ($scope) { // // Initialize the model variables // $scope.firstName = "Bob"; // $scope.middleName = "Al"; // $scope.lastName = "Smith"; // // Define utility functions // $scope.getFullName = function () { // return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName; // }; //}; </script> </body> </html>