Como modificar o escopo de dentro de uma diretiva em AngularJs

Eu preciso modificar um atributo de escopo raiz de dentro de um retorno de chamada dentro de uma diretiva. Mas a diretiva está em um escopo interno criado por uma diretiva de switch.

HTML

 

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

Violino: http://jsfiddle.net/nJ7FQ/

Meu objective é poder exibir “Novo valor” na área Selecionado. Como posso realizar o que estou tentando fazer? O que estou fazendo de errado?

Além disso, como estou tentando fazer um componente. Existe uma maneira de fazer o mesmo, mas com um escopo isolado?

Eu atualizei o violino, basicamente tinha que ir para o pai para obter a variável “selecionada” correta, também usou o escopo isolate = para obter binding de duas vias entre o valor passado e o 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'; } 

e o HTML

 

Selected: {{ selected }}

Item: {{ selected }}

Worked

Atualizado o violino para usar sua leitura original da propriedade do atributo: http://jsfiddle.net/nJ7FQ/4/

Eu melhorei o jsfiddle um pouco:

 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/

Dessa forma, o valor do escopo que você deseja alterar também pode ser uma propriedade de object, como selected.foo no exemplo. Além disso, removi o parâmetro escopo e informei à diretiva para sempre usar o escopo pai. E finalmente eu envolvi o manipulador de clique no retorno de chamada $apply (veja aqui, por exemplo). Melhor seria, claro, usar o ngClick vez do element.bind() .