AngularJS는 컨트롤러로부터의 속성 접근을 지시합니다.

AngularJS는 컨트롤러로부터의 속성 접근을 지시합니다.

컨트롤러 함수의 디렉티브 속성에 액세스하려고 합니다.단, 접속할 때는 정의되어 있지 않습니다.간단한 타이머를 하면 작동한다는 걸 알았어요.명령어가 준비되고 사용되도록 설정된 후에만 코드를 실행할 수 있는 방법이 있습니까?

내가 그걸 만지작거렸어.콘솔이 열려 있는지 확인합니다.http://jsfiddle.net/paulocoelho/uKA2L/1/

다음은 바이올린에서 사용하는 코드입니다.

<div ng-app="testApp" >
    <testcomponent text="hello!"></testcomponent>
</div>

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        controller: function ($scope, $element) {
            console.log($scope.text); // this will return undefined
            setTimeout(function () {
                console.log($scope.text);    // this will return the actual value...
            }, 1000);
        },
        link: function ($scope, $element, $attrs) {
            console.log($scope.text);
            setTimeout(function () {
                console.log($scope.text);
            }, 1000);
        }
    };
});

동작하는 것은,

scope.text = $attrs.text;

링크 내 및 컨트롤러 기능.양방향 데이터 바인딩이 없기 때문에 이 방법은 처음에만 작동합니다.$attrs.observe를 사용할 수 있습니다.

http://jsfiddle.net/JohannesJo/nm3FL/2/ 를 참조해 주세요.

분리된 범위에서는 '@'로 정의된 로컬 범위 속성에 링크 기능에서 액세스할 수 없습니다.@remigio가 이미 언급했듯이 이러한 로컬 스코프 속성은 다음과 같습니다.undefined그 시점에서.$attrs.$syslog() 또는 $syslog.$watch()를 사용하여 (인증된) 값을 비동기적으로 취득해야 합니다.

속성에서 상수 값을 전달하고 있는 경우(즉, 보간은 필요하지 않습니다.즉, 속성 값에 {{}}s가 포함되지 않습니다) '@' 또는 $observer 또는 $watch가 필요하지 않습니다.@hugo에서 제안하는 바와 같이 $attrs.attribute_name을 한 번 사용하거나 숫자 또는 부울을 전달하고 적절한 유형을 가져오려면 $scope를 사용할 수 있습니다.$eval440attrs.deval_name)을 1회 입력합니다.

로컬 스코프 속성을 상위 스코프 속성에 데이터베이스 바인드하기 위해 '='를 사용하면 링크 함수에서 속성 값을 사용할 수 있습니다($120, $watch, $eval 필요 없음).

대신 을 사용하는 대신$scope직접 속성 값을 얻기 위해 개인적으로 사용하는 것을 선호합니다.$attrs를 위해controller기능, 또는 단지attrs의 세 번째 파라미터로link기능.Atribute 값을 취득할 때는 문제가 없습니다.controller타임아웃 없이 다음 코드를 사용합니다.

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
    restrict: 'E',
    template: '<div><p>{{text}} This will run fine! </p></div>',
    scope: {
        text: '@text'
    },
    controller: ['$scope','$attrs', function ($scope, $attrs) {
        console.log($attrs.text); // just call to the $attrs instead $scope and i got the actual value
        $scope.text = $attrs.text; //assign attribute to the scope
    }]
    };
});

Angular 1.3을 사용하면bindToController여기 사용 방법의 샘플이 있습니다.여기서 Atribute를 스코프에 추가한 후bindToController컨트롤러 내부에서 사용하는 경우:

var module = angular.module('testApp', [])
    .directive('testcomponent', function () {
    return {
        restrict: 'E',
        template: '<div><p>{{text}} This will run fine! </p></div>',
        scope: {
            text: '@text'
        },
        controller: function () {
            console.log(this.text);
        },
        controllerAs: 'vm',
        bindToController: true
    };
});

Angular 1.3에서는 bindToController라고 하는 디렉티브 정의 객체에 새로운 속성이 도입되어 있습니다.이 오브젝트는 명령어를 그대로 실행합니다.controllerAs를 사용하는 격리된 범위에서 true로 설정하면 구성 요소의 속성이 범위가 아닌 컨트롤러에 바인딩됩니다.즉, Angular는 컨트롤러가 인스턴스화되면 격리된 스코프 바인딩의 초기값을 사용할 수 있으며 향후 변경사항도 자동으로 사용할 수 있도록 합니다.

링크 함수는 $digest 루프 전에 호출되며, 이 시점에서 스코프 변수는 정의되지 않습니다.링크 기능의 동작에 대해서는, 이 장과 이 장을 참조해 주세요.링크 함수는 디렉티브의 워치나 동작을 정의하는 데만 사용합니다.모델을 조작하는 것은 아닙니다.이것은 컨트롤러에서 실행됩니다.

디렉티브를 사용하여 뷰에 삽입하기 위해 디렉티브에서 이 값에 액세스하는 경우 $compile api를 사용하여 이 Atribut에 액세스할 수 있습니다.

var string = "<div> " + scope.text + "</div>";
$compile(string)(scope, function(cloned, scope){
       element.append(cloned);
});

언급URL : https://stackoverflow.com/questions/15151116/angularjs-directives-attributes-access-from-the-controller