Как изменить область действия внутри директивы в AngularJs

Мне нужно изменить атрибут области корня изнутри обратного вызова внутри директивы. Но директива находится во внутренней области, созданной директивой switch.

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>

JavaScript

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';
}

Fiddle: http://jsfiddle.net/nJ7FQ/

Моя цель - показать "Новое значение" в области "Выбранные". Как я могу выполнить то, что я пытаюсь сделать? Что я делаю неправильно?

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

Ответ 1

Я обновил скрипку, в основном должен был перейти к родительскому, чтобы получить правильную "выбранную" переменную, также использовал изоляцию scope =, чтобы получить двухстороннюю привязку между переданным значением и внутренней моделью.

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/

Ответ 2

Я немного улучшил 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 и сказал директиве всегда использовать родительскую область. И, наконец, я завернул обработчик кликов в обратный вызов $apply (см. здесь). Лучше было бы, конечно, использовать ngClick вместо element.bind().