angularjs单页面多Controller示例

最新推荐文章于 2019-07-04 23:09:18 发布

zlklove1234

最新推荐文章于 2019-07-04 23:09:18 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/zlklove1234/article/details/42389331

版权

http://www.angularjshub.com/examples/basics/multiplecontrollers

<!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>