Angular JS Magazine

marți, 16 septembrie 2014

Working With Scope-less Controllers

In this tip you can see how to use a Angular JS controller without a scope. When you think that scope is useless, you can follow the below example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script>
        angular.module("appModule", [])
                .controller("appCtrl", function ($scope) {
                    this.text = "I love Angular JS";

                    this.textToUpperCase = function () {
                        this.text = this.text.toUpperCase();
                    }
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl as ctrl">
    <div class="input-group">
       <span class="input-group-btn">
         <button class="btn btn-default" type="button"
                      ng-click="ctrl.textToUpperCase()">To Upper Case</button>
       </span>
        <input class="form-control" ng-model="ctrl.text">
    </div>
</div>
</body>
</html>

Before pressing the button labeled "To Upper Case":


After pressing the button labeled "To Upper Case":