AngularJs의 지시어 내에서 스코프를 수정하는 방법

AngularJs의 지시어 내에서 스코프를 수정하는 방법

디렉티브 내의 콜백 내에서 루트 스코프 속성을 변경해야 합니다.단, 디렉티브는 스위치 디렉티브에 의해 작성된 내부 범위 내에 있습니다.

HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

자바스크립트

angular.module('app', [])    
    .directive("customTag", [function () {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

바이올린: http://jsfiddle.net/nJ7FQ/

제 목표는 "Selected" 영역에 "New value"를 표시하는 것입니다.어떻게 하면 내가 하려는 일을 해낼 수 있을까?내가 뭘 잘못하고 있지?

게다가, 나는 부품을 만들려고 노력하고 있어.동일한 방법으로 격리된 범위를 사용할 수 있습니까?

바이올린을 업데이트하고 기본적으로 올바른 "선택된" 변수를 얻기 위해 부모에게 가야 했으며, 또한 전달된 값과 내부 모델 간의 양방향 바인딩을 위해 격리 범위 =를 사용했습니다.

http://jsfiddle.net/nJ7FQ/2/

angular.module('app', [])

    .directive("customTag", [function () {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",
        scope: {model:'='},

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.model[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

및 HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" model="$parent" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

속성 http://jsfiddle.net/nJ7FQ/4/에서 속성을 처음 읽도록 바이올린을 업데이트했습니다.

jsfiddle을 조금 개선했습니다.

angular.module('app', [])

    .directive("customTag", ['$parse', function ($parse) {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.$apply(function () {
                    $parse(attrs.selectedItem).assign(scope.$parent, "New value");
                });
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = { 'foo': 'Old value' };
}

http://jsfiddle.net/nJ7FQ/15/

이 방법으로 변경할 범위 값도 다음과 같은 객체 속성이 될 수 있습니다.selected.foo를 참조해 주세요.또한 scope 파라미터를 삭제하고 항상 parent scope를 사용하도록 지시했습니다.그리고 마지막으로 클릭 핸들러를$apply콜백(예를 들어 여기를 참조).물론 사용하는 것이 좋습니다.ngClick대신element.bind().

언급URL : https://stackoverflow.com/questions/17561632/how-to-modify-scope-from-within-a-directive-in-angularjs