Самый простой способ передать переменную области видимости AngularJS из директивы в контроллер?

Какой самый простой способ передать переменную области видимости AngularJS из директивы в контроллер? Все примеры, которые я видел, кажутся настолько сложными, разве нет способа, которым я могу получить доступ к контроллеру из директивы и установить одну из его переменных области действия?

98 голосов | спросил Matt Reyer 10 62012vEurope/Moscow11bEurope/MoscowSat, 10 Nov 2012 06:42:41 +0400 2012, 06:42:41

2 ответа


0

Отредактировано 2014/8/25: Здесь , где я его разветвлял.

Спасибо @anvarik.

Вот JSFiddle . Я забыл, где я это разветвлял. Но это хороший пример, показывающий разницу между = и @

 <div ng-controller="MyCtrl">
    <h2>Parent Scope</h2>
    <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>    
    <br><br>
    <!-- attribute-foo binds to a DOM attribute which is always
    a string. That is why we are wrapping it in curly braces so
    that it can be interpolated. -->
    <my-component attribute-foo="{{foo}}" binding-foo="foo"
        isolated-expression-foo="updateFoo(newFoo)" >
        <h2>Attribute</h2>
        <div>
            <strong>get:</strong> {{isolatedAttributeFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
            <i>// This does not update the parent scope.</i>
        </div>
        <h2>Binding</h2>
        <div>
            <strong>get:</strong> {{isolatedBindingFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedBindingFoo">
            <i>// This does update the parent scope.</i>
        </div>
        <h2>Expression</h2>    
        <div>
            <input ng-model="isolatedFoo">
            <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
            <i>// And this calls a function on the parent scope.</i>
        </div>
    </my-component>
</div>
 var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between
                parent and isolated scope. */                
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }        
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'Hello!';
        $scope.updateFoo = function (newFoo) {
            $scope.foo = newFoo;
        }
    }]);
ответил maxisam 10 62012vEurope/Moscow11bEurope/MoscowSat, 10 Nov 2012 08:09:50 +0400 2012, 08:09:50
0

Подождите, пока angular оценит переменную

Я много возился с этим и не мог заставить его работать даже с переменной, определенной с помощью "=" в сфера Вот три решения в зависимости от вашей ситуации.


Решение № 1


Я обнаружил , что переменная еще не была оценена как угловая , когда она была передана директиве. Это означает, что вы можете получить к нему доступ и использовать его в шаблоне, но не внутри ссылки или функции контроллера приложения, если мы не дождемся его оценки.

Если ваша переменная изменяется или извлекается из запроса, вы должны использовать $observe или $watch :

app.directive('yourDirective', function () {
    return {
        restrict: 'A',
        // NB: no isolated scope!!
        link: function (scope, element, attrs) {
            // observe changes in attribute - could also be scope.$watch
            attrs.$observe('yourDirective', function (value) {
                if (value) {
                    console.log(value);
                    // pass value to app controller
                    scope.variable = value;
                }
            });
        },
        // the variable is available in directive controller,
        // and can be fetched as done in link function
        controller: ['$scope', '$element', '$attrs',
            function ($scope, $element, $attrs) {
                // observe changes in attribute - could also be scope.$watch
                $attrs.$observe('yourDirective', function (value) {
                    if (value) {
                        console.log(value);
                        // pass value to app controller
                        $scope.variable = value;
                    }
                });
            }
        ]
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    // variable passed to app controller
    $scope.$watch('variable', function (value) {
        if (value) {
            console.log(value);
        }
    });
}]);

А вот HTML (помните скобки!):

<div ng-controller="MyCtrl">
    <div your-directive="{{ someObject.someVariable }}"></div>
    <!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

Обратите внимание, что вы не должны устанавливать для переменной значение "=" в области видимости, если вы используете $observe функция. Кроме того, я обнаружил, что он передает объекты в виде строк, поэтому, если вы передаете объекты, используйте решение # 2 или scope.$watch(attrs.yourDirective, fn) (или # 3 , если ваша переменная не меняется).


Решение № 2


Если ваша переменная создана, например, в другой контроллер , но нужно просто подождать, пока angular его оценит, прежде чем отправлять его в контроллер приложения, мы можем использовать $timeout , чтобы дождаться $apply запущен. Также нам нужно использовать $emit для отправки его в родительский контроллер приложения области (из-за изолированной области в директиве):

app.directive('yourDirective', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        // NB: isolated scope!!
        scope: {
            yourDirective: '='
        },
        link: function (scope, element, attrs) {
            // wait until after $apply
            $timeout(function(){
                console.log(scope.yourDirective);
                // use scope.$emit to pass it to controller
                scope.$emit('notification', scope.yourDirective);
            });
        },
        // the variable is available in directive controller,
        // and can be fetched as done in link function
        controller: [ '$scope', function ($scope) {
            // wait until after $apply
            $timeout(function(){
                console.log($scope.yourDirective);
                // use $scope.$emit to pass it to controller
                $scope.$emit('notification', scope.yourDirective);
            });
        }]
    };
}])
.controller('MyCtrl', ['$scope', function ($scope) {
    // variable passed to app controller
    $scope.$on('notification', function (evt, value) {
        console.log(value);
        $scope.variable = value;
    });
}]);

А вот HTML (без скобок!):

<div ng-controller="MyCtrl">
    <div your-directive="someObject.someVariable"></div>
    <!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

Решение № 3


Если ваша переменная не меняется , и вам необходимо оценить ее в своей директиве, вы можете использовать $eval функция:

app.directive('yourDirective', function () {
    return {
        restrict: 'A',
        // NB: no isolated scope!!
        link: function (scope, element, attrs) {
            // executes the expression on the current scope returning the result
            // and adds it to the scope
            scope.variable = scope.$eval(attrs.yourDirective);
            console.log(scope.variable);

        },
        // the variable is available in directive controller,
        // and can be fetched as done in link function
        controller: ['$scope', '$element', '$attrs',
            function ($scope, $element, $attrs) {
                // executes the expression on the current scope returning the result
                // and adds it to the scope
                scope.variable = scope.$eval($attrs.yourDirective);
                console.log($scope.variable);
            }
         ]
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    // variable passed to app controller
    $scope.$watch('variable', function (value) {
        if (value) {
            console.log(value);
        }
    });
}]);

А вот HTML (помните скобки!):

<div ng-controller="MyCtrl">
    <div your-directive="{{ someObject.someVariable }}"></div>
    <!-- use ng-bind instead of {{ }}, when you can to avoids FOUC -->
    <div ng-bind="variable"></div>
</div>

Также взгляните на этот ответ: https://stackoverflow.com/a/12372494/1008519

Справочная информация по проблеме FOUC (флэш-содержимого без стилей): http : //deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

Для заинтересованных: вот статья о угловом жизненном цикле

ответил mlunoe 13 J0000006Europe/Moscow 2013, 16:40:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132