Cómo modificar el scope desde una directiva en AngularJs

Necesito modificar un atributo de ámbito raíz dentro de una callback dentro de una directiva. Pero la directiva se encuentra en un ámbito interno creado por una directiva switch.

HTML

Selected: {{ selected }}

Item: {{ selected }}

Worked

JavaScript

 angular.module('app', []) .directive("customTag", [function () { return { restrict: "E", replace: true, template: "", 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/

Mi objective es poder mostrar “Nuevo valor” en el área Seleccionada. ¿Cómo puedo lograr lo que estoy tratando de hacer? ¿Qué estoy haciendo mal?

Además, como estoy tratando de hacer un componente. ¿Hay alguna manera de hacer lo mismo pero con un scope aislado?

Actualicé el violín, básicamente tuve que ir al padre para obtener la variable “seleccionada” correcta, también utilicé el scope aislado = para obtener un enlace bidireccional entre el valor pasado y el modelo interno.

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

 angular.module('app', []) .directive("customTag", [function () { return { restrict: "E", replace: true, template: "", 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'; } 

y el HTML

 

Selected: {{ selected }}

Item: {{ selected }}

Worked

Se actualizó el violín para usar su lectura original de la propiedad del atributo: http://jsfiddle.net/nJ7FQ/4/

Mejoré el jsfiddle un poco:

 angular.module('app', []) .directive("customTag", ['$parse', function ($parse) { return { restrict: "E", replace: true, template: "", 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/

De esta forma, el valor del scope, que desea cambiar también puede ser una propiedad del objeto como selected.foo en el ejemplo. Además, eliminé el parámetro scope y le dije a la directiva que siempre use el scope principal. Y finalmente envolví el manejador de clics en la callback $apply (ver aquí por ejemplo). Mejor sería, por supuesto, usar ngClick lugar de element.bind() .