angular:angularjs:custom_directive:bindtocontroller []

Это старая версия документа!

Я постоянно нахожу что-то новое в Angular 1.3. Одна из вещей, которые я нашел, - это атрибут bindToController. Я сторонник использования синтаксиса controllerAs, чтобы избавиться от переменной $scope. Единственная проблема раньше заключалась в том, что в директиве вам все еще приходилось использовать $scope… до сих пор.

Давайте сначала посмотрим, что в документации AngularJS говорится об атрибуте bindToController:
Когда для компонента используется изолированная область (см. Выше) и используется controllerAs, bindToController: true позволит компоненту привязать свои свойства к контроллеру, а не к области. При создании экземпляра контроллера исходные значения привязок изолированной области уже доступны.

Раньше переменные области видимости не включались в область действия контроллера при использовании controllerAs. Это означает, что переменные области действия директивы не были привязаны к объекту, созданному controllerAs. Атрибут bindToController исправляет это.

пример кода со $scope

<head>
    <title></title>
    <script src="http://crm.localhost/vendor/angular/angular.min.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.count = 5;
        })
 
        .directive('counter', function counter() {
            return {
 
                scope: {
                    count: '='
                },
                controller: function ($scope) {
 
                    function increment() {
                        $scope.count++;
                    }
                    function decrement() {
                        $scope.count--;
                    }
                    $scope.increment = increment;
                    $scope.decrement = decrement;
                },
                template: [
                    '<div class="form-group">',
                        '<label class="control-label col-md-1" for="">Директива</label>',
                        '<div class="input-group col-md-2">',
                            '<div class="input-group-addon" ng-click="decrement();">-</div>',
                            '<input class="form-control" type="text" ng-model="count">',
                            '<div class="input-group-addon" ng-click="increment();">+</div>',
                        '</div>',
                    '</div>'
                ].join('')
            };
        });
 
    </script>
</head>
<body ng-controller="studyCtrl as vm">
    <div class="container">
        <br>
        <div class="row">
            <div class="col-md-1"><b>контроллер</b></div> <div class="col-md-2">{{count}}</div>
        </div>
        <br>
        <div class="row">
            <label><counter  count="count"></counter></label>
        </div>
    </div>
</body>

Инструменты пользователя

Инструменты сайта

Боковая панель

Инструменты страницы