AngularJS Essential. Урок 4. Контроллеры и Scope. Домашнее задание.

  • 60 Просмотры
  • Последний пост 19 декабря 2016
Maxim Shulga разместил пост 19 декабря 2016

Дополнительное задание 1.

 

Код
<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Дополнительное задание 1</title>
    <script src="../Libraries/angular.js"></script>
    <link href="../Libraries/bootstrap-theme.css" rel="stylesheet"/>
    <link href="../Libraries/bootstrap.css" rel="stylesheet"/>
    <script>
        var myApp = angular.module("app", []);

        myApp.controller("appFirstCtrl", function ($scope, $rootScope) {

            $scope.toCopy = function () {
                $rootScope.$broadcast("messageCopy", {
                    data: $scope.value
                });
            }
        })

        myApp.controller("appSecondCtrl", function ($scope) {

            $scope.$on("messageCopy", function (event, args) {
                $scope.bufer = args.data;
            })

            $scope.toPaste = function () {
                $scope.value = $scope.bufer;
            }
        })
    </script>
</head>
<body>
    <div ng-controller="appFirstCtrl">
        <input type="button" class="btn btn-default" value="Copy" ng-click="toCopy()"/>
        <input type="text" class="input-sm" ng-model="value" />
    </div>
    <div ng-controller="appSecondCtrl">
        <input type="button" class="btn btn-default" value="Paste" ng-click="toPaste()" />
        <input type="text" class="input-sm" ng-model="value" />
    </div>
</body>
</html>

 

Здесь, для передачи данных от одного к другому независимому контроллеру использовал $rootScope с методом $broadcast. Думаю направление выбрал правильное для решения задания .

  • Пост понравился
  • Петр Галушко
Maxim Shulga разместил пост 19 декабря 2016

Задание 1

 

Код
<!DOCTYPE html>
<html ng-app="calc">
<head>
    <title>Задание 1</title>

    <script src="../Libraries/angular.js"></script>
    <script>
        var app = angular.module("calc", []);

        app.controller("baseAddCtrl", function ($scope) {

            $scope.mathematics = { operand1: "", operand2: "", result: "" }

            $scope.add = function () {
                $scope.mathematics.result = parseFloat($scope.mathematics.operand1) + parseFloat($scope.mathematics.operand2);
            }
        });

        app.controller("subCtrl", function ($scope) {

            $scope.sub = function () {
                $scope.mathematics.result = parseFloat($scope.mathematics.operand1) - parseFloat($scope.mathematics.operand2);
            }
        });

        app.controller("mulCtrl", function ($scope) {

            $scope.mul = function () {
                $scope.mathematics.result = parseFloat($scope.mathematics.operand1) * parseFloat($scope.mathematics.operand2);
            }
        });

        app.controller("divCtrl", function ($scope) {

            $scope.div = function () {

                var operand1 = parseFloat($scope.mathematics.operand1), operand2 = parseFloat($scope.mathematics.operand2);

                if (operand2 == 0) { $scope.mathematics.result = "Division by zero" }
                else {
                    $scope.mathematics.result = operand1 / operand2;
                }
            }

        });

    </script>
</head>
<body>
    <div ng-controller="baseAddCtrl">
        <div ng-controller="subCtrl">
            <div ng-controller="mulCtrl">
                <div ng-controller="divCtrl">

                    a = <input type="text" placeholder="Enter value" ng-model="mathematics.operand1">
                    b = <input type="text" placeholder="Enter value" ng-model="mathematics.operand2">

                    Arithmetic operation:
                    <input type="button" value="+" ng-click="add()" />
                    <input type="button" value="-" ng-click="sub()" />
                    <input type="button" value="*" ng-click="mul()" />
                    <input type="button" value="/" ng-click="div()" /><br /><br />

                    Result: {{mathematics.result}}
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

  • Пост понравился
  • Петр Галушко
Close