가장 쉬운 각도 통과 방법지시어에서 컨트롤러로의 JS 범위 변수

가장 쉬운 각도 통과 방법지시어에서 컨트롤러로의 JS 범위 변수

Angular를 통과하는 가장 쉬운 방법은 무엇입니까?지시어에서 컨트롤러로의 JS 범위 변수지금까지 본 예는 모두 매우 복잡해 보이는데, 명령에서 컨트롤러에 액세스하여 컨트롤러의 범위 변수 중 하나를 설정하는 방법은 없습니까?

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;
        }
    }]);

각도가 변수를 평가할 때까지 기다립니다.

저는 이걸 만지작거려봤지만, 이 변수가 정의되어 있어도 제대로 작동하지 않았습니다."="범위 내.고객님의 상황에 따라 세 가지 해결 방법이 있습니다.

---

솔루션 #1

---

지시문에 전달되었을 때 변수가 아직 각도로 평가되지 않았다는 것을 알게 되었습니다.즉, 템플릿에서 액세스하여 사용할 수 있지만 평가될 때까지 링크 또는 앱 컨트롤러 기능 내에서는 사용할 수 없습니다.

변수가 변경 중이거나 요청을 통해 가져올 경우 또는 를 사용해야 합니다.

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>

변수를 다음과 같이 설정하지 마십시오."="스코프에 표시됩니다(기능을 사용하는 경우).또한 오브젝트를 문자열로 전달하므로 오브젝트를 전달하려면 솔루션 #2 또는scope.$watch(attrs.yourDirective, fn)(또는 변수가 변경되지 않은 경우 #3).

---

솔루션 #2

---

변수가 다른 컨트롤러에서 생성되었지만 각도가 평가할 때까지 기다린 후 앱 컨트롤러로 전송하면 됩니다.$apply가 실행되었습니다.또한 명령어로 분리된 범위 때문에 를 사용하여 상위 범위 앱 컨트롤러로 전송해야 합니다.

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

---

변수가 변경되지 않고 지시문에서 변수를 평가할 필요가 있는 경우 다음 함수를 사용할 수 있습니다.

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

FOC(비스타일 콘텐츠 플래시) 문제에 대한 레퍼런스:http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

관심있는 분들을 위해: 여기 각진 라이프 사이클에 대한 기사가 있습니다.

언급URL : https://stackoverflow.com/questions/13318726/easiest-way-to-pass-an-angularjs-scope-variable-from-directive-to-controller