Alcance aislado de Angularjs para directivas sin plantilla propia

Quiero crear directivas reutilizables en AngularJS sin plantilla propia. También quiero tener un scope aislado para esa directiva. ¿Cuáles son las mejores prácticas para mi enfoque? ¿Por qué mi ejemplo no funciona como espero?

Esperaba poder editar obj1 y obj2 de las directivas por separado.

HTML:

<div ng-controller="MyCtrl"> X1: {{ obj1.x }}, Y1: {{ obj1.y }} X2: {{ obj2.x }}, Y2: {{ obj2.y }} <hr> Edit obj1: <div draggable target="obj1"> <input type="text" ng-model="target.x"> <input type="text" ng-model="target.y"> </div> Edit obj2: <div draggable target="obj2"> <input type="text" ng-model="target.x"> <input type="text" ng-model="target.y"> </div> </div> 

JS:

 angular.module("App", []) .controller("MyCtrl", function($scope) { $scope.obj1 = { x: 10, y: 20 }; $scope.obj2 = { x: 30, y: 40 }; }) .directive("draggable", function() { return { scope: { target: "=" }, link: function(scope, el, attrs) { console.log("scope: ", scope); } } }); 

PLUNKR: http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ

La forma en que su código está funcionando ahora, es que el contenido de cada directiva está vinculado al scope principal, y no al scope aislado de la directiva, por lo que cada target es una reference a la misma variable.

Lo que tendrá que hacer es transclude el contenido de la directiva. El uso habitual para esto es que desea que los contenidos estén en el ámbito principal de la directiva, y no en el ámbito aislado. Sin embargo, desea que el contenido esté en el ámbito aislado de la directiva. Por lo tanto, deberá llamar manualmente a la function de transclude y vincular los contenidos al scope aislado de la directiva:

 .directive("draggable", function($compile) { return { transclude: true, scope: { target: "=" }, link: function(scope, element, attrs, ctrl, transclude) { transclude(scope, function(clone) { element.append(clone); }); } } }) 

Puedes ver esto en este Plunker . Una cosa que no hace es $watch el contenido del 'objective', así que sospecho que no reactjsrá a los cambios en el atributo "objective" en la directiva. Esto podría ser mejor dejar otra pregunta.

Editar: el uso de transclude fue incorrecto / excesivamente complicado. Puede pasar el scope como el primer parámetro para vincular correctamente el clon al scope correcto.

Vine aquí enfrentando la misma confusión. Aparentemente, el caso es el siguiente.

Dejando a un lado la transclusión, solo los elementos en una plantilla para la directiva estarán vinculados al scope aislado creado por esa directiva. Si no usa una plantilla, el contenido del elemento, en el que se declara la directiva, se enlazará como si el scope aislado no estuviera allí.

Aquí hay un plunker modificado desde arriba que muestra esto. http://plnkr.co/edit/WqEKkNAj4p2Rly51LBzC?p=preview