커스텀 디렉티브 내에서 평가된 속성을 취득하는 방법

커스텀 디렉티브 내에서 평가된 속성을 취득하는 방법

커스텀 디렉티브에서 평가된 Atribute를 취득하려고 하는데 올바른 방법을 찾을 수 없습니다.

저는 이 jsFiddle을 상세하게 작성했습니다.

<div ng-controller="MyCtrl">
    <input my-directive value="123">
    <input my-directive value="{{1+1}}">
</div>

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+attr.value);
    }
});

제가 무엇을 빠뜨리고 있나요?

주의: 더 나은 해결책을 찾기 위해 이 답변을 업데이트합니다.또한 오래된 답변은 관계가 있는 한 나중에 참조할 수 있도록 보관하고 있습니다.가장 최신적이고 최선의 답변이 우선입니다.

더 나은 답변:

angularjs의 지시어는 매우 강력하지만 뒤에 어떤 프로세스가 있는지 이해하는 데 시간이 걸립니다.

angularjs를 사용하면 디렉티브를 작성할 때 부모 스코프에 대한 바인딩이 있는 격리 스코프를 작성할 수 있습니다.이러한 바인딩은 DOM에서 요소를 부가하는 속성 및 디렉티브 정의 개체에서 스코프 속성을 정의하는 방법에 의해 지정됩니다.

범위 내에서 정의할 수 있는 바인딩 옵션에는 3가지 유형이 있으며 이러한 옵션은 프레픽스 관련 속성으로 씁니다.

angular.module("myApp", []).directive("myDirective", function () {
    return {
        restrict: "A",
        scope: {
            text: "@myText",
            twoWayBind: "=myTwoWayBind",
            oneWayBind: "&myOneWayBind"
        }
    };
}).controller("myController", function ($scope) {
    $scope.foo = {name: "Umur"};
    $scope.bar = "qwe";
});

HTML

<div ng-controller="myController">
    <div my-directive my-text="hello {{ bar }}" my-two-way-bind="foo" my-one-way-bind="bar">
    </div>
</div>

이 경우 디렉티브의 범위(링크 기능 또는 컨트롤러)에서는 다음과 같은 속성에 액세스할 수 있습니다.

/* Directive scope */

in: $scope.text
out: "hello qwe"
// this would automatically update the changes of value in digest
// this is always string as dom attributes values are always strings

in: $scope.twoWayBind
out: {name:"Umur"}
// this would automatically update the changes of value in digest
// changes in this will be reflected in parent scope

// in directive's scope
in: $scope.twoWayBind.name = "John"

//in parent scope
in: $scope.foo.name
out: "John"


in: $scope.oneWayBind() // notice the function call, this binding is read only
out: "qwe"
// any changes here will not reflect in parent, as this only a getter .

"여전히 OK" 답변:

이 답변은 승인되었지만 문제가 있으므로 더 나은 답변으로 업데이트하겠습니다., ★★★★★★★★★★★★★.$parse는 현재 스코프의 속성에 존재하지 않는 서비스입니다.즉, 각도 표현만 취할 뿐 스코프에 도달할 수 없습니다. {{ ,}}되는 동안 즉, angularjs는 angularjs의 angularjs가 됩니다.postlink서메{{1+1}}2을 참조)

사용하는 방법은 다음과 같습니다.

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function ($parse) {
    return function (scope, element, attr) {
        element.val("value=" + $parse(attr.myDirective)(scope));
    };
});

function MyCtrl($scope) {
    $scope.aaa = 3432;
}​

.

<div ng-controller="MyCtrl">
    <input my-directive="123">
    <input my-directive="1+1">
    <input my-directive="'1+1'">
    <input my-directive="aaa">
</div>​​​​​​​​

여기서 주의할 점은 값 문자열을 설정할 경우 따옴표로 묶어야 한다는 것입니다.(3번째 입력 참조)

다음은 바이올린 연주입니다.http://jsfiddle.net/neuTA/6/

오래된 답변:

수 있는 이것을 . 하세요.$eval하는 게 것 같은데, 하는 게 좋을 것 같아요.$parse동작이 다르므로 대부분의 경우 이 기능을 사용할 필요가 없습니다.

한 번 scope.$eval각도 표현식을 컴파일할 뿐만 아니라 현재 스코프의 속성에 액세스할 수 있습니다.

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+ scope.$eval(attr.value));
    }
});

function MyCtrl($scope) {
   
}​

당신이 놓치고 있는 거야$eval.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval

결과를 반환하는 현재 범위에서 식을 실행합니다.표현식의 예외는 전파됩니다(포착되지 않음).각도 표현식을 평가할 때 유용합니다.

격리된 스코프를 사용하지 않는 명령어로 보간해야 하는 속성 값.

<input my-directive value="{{1+1}}">

Attributes'$observe:

myApp.directive('myDirective', function () {
  return function (scope, element, attr) {
    attr.$observe('value', function(actual_value) {
      element.val("value = "+ actual_value);
    })
 }
});

지시사항 페이지에서

보간 속성 관찰:사용하다$observe보간(예: 보간)을 포함하는 속성의 값 변화를 관찰합니다.src="{{bar}}"이것은 매우 효율적일 뿐만 아니라 실제 값을 쉽게 얻을 수 있는 유일한 방법입니다. 왜냐하면 링크 단계에서는 보간법이 아직 평가되지 않았기 때문입니다.따라서 현시점에서는 값이 다음과 같이 설정됩니다.undefined.

속성값이 상수일 경우, 예를 들어

<input my-directive value="123">

값이 숫자 또는 부울이고 올바른 유형을 원하는 경우 $eval을 사용할 수 있습니다.

return function (scope, element, attr) {
   var number = scope.$eval(attr.value);
   console.log(number, number + 1);
});

Atribute 값이 문자열 상수이거나 디렉티브에서 값을 문자열 유형으로 하는 경우 직접 액세스할 수 있습니다.

return function (scope, element, attr) {
   var str = attr.value;
   console.log(str, str + " more");
});

그러나 사용자의 경우 보간된 값과 상수를 지원하려면$observe.

다른 답변은 매우 정확하고 가치가 있습니다.그러나 때로는 단순한 것만을 원할 수도 있습니다.지시적인 인스턴스화로 업데이트 없이 격리된 스코프를 방해하지 않고 단순하게 오래된 구문 분석 값을 얻을 수 있습니다.예를 들어 명령어에 선언적인 페이로드(payload)를 배열 또는 해시 개체로 다음 형식으로 제공하면 편리합니다.

my-directive-name="['string1', 'string2']"

그럼 본론으로 들어가서 기본을 잘 활용하면 되겠네angular.$eval(attr.attrName).

element.val("value = "+angular.$eval(attr.value));

현업 바이올린

제가 찾던 솔루션과 동일한 솔루션Angularjs directive with ng-Model.
다음은 문제를 해결하는 코드입니다.

    myApp.directive('zipcodeformatter', function () {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function (scope, element, attrs, ngModel) {

            scope.$watch(attrs.ngModel, function (v) {
                if (v) {
                    console.log('value changed, new value is: ' + v + ' ' + v.length);
                    if (v.length > 5) {
                        var newzip = v.replace("-", '');
                        var str = newzip.substring(0, 5) + '-' + newzip.substring(5, newzip.length);
                        element.val(str);

                    } else {
                        element.val(v);
                    }

                }

            });

        }
    };
});

HTML DOM

<input maxlength="10" zipcodeformatter onkeypress="return isNumberKey(event)" placeholder="Zipcode" type="text" ng-readonly="!checked" name="zipcode" id="postal_code" class="form-control input-sm" ng-model="patient.shippingZipcode" required ng-required="true">

결과:

92108-2223

var myApp = angular.module('myApp',[]);

myApp .directive('myDirective', function ($timeout) {
    return function (scope, element, attr) {
        $timeout(function(){
            element.val("value = "+attr.value);
        });

    }
});

function MyCtrl($scope) {

}

dom 로드 후 디렉티브 호출이 실행되어 변경이 적용되지 않으므로 $timeout을 사용합니다.

언급URL : https://stackoverflow.com/questions/12371159/how-to-get-evaluated-attributes-inside-a-custom-directive