Lo siguiente podría ser ejecutado en manifestación aquí.
esto es html:
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
Y esto es js:
var myModule = angular.module("myModule", [])
.directive("myComponent", function () {
return {
restrict:"E",
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:"@attributeFoo",
isolatedBindingFoo:"=bindingFoo",
isolatedExpressionFoo:"&"
}
};
})
.controller("MyCtrl", ["$scope", function ($scope) {
$scope.foo = "Hello!";
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Este debería ser un buen ejemplo para tres tipos deSin embargo, simplemente no funciona cuando intento cambiar una versión angular superior - (1.2.27). Sospecho la sombra del alcance heredado dentro de la directiva, pero no estoy seguro de ello.
Respuestas
1 para la respuesta № 1Esto no va a funcionar como usted espera. Los ámbitos aislados se crean y proporcionan a la Link, Compiley Template partes de una Directiva. Sin embargo, el HTML dentro de la Element En sí misma no forma parte de la Directiva. Esas porciones de HTML todavía están vinculadas al padre $scope. Si tiene la tendencia a nombrar sus objetos de alcance aislados, es posible que haya estado trabajando contra el $scope Sin quererlo y no se notó ningún efecto nocivo Si tu HTML estaba en una Template en lugar de dentro de la Element, se accedería al ámbito aislado.
Como ejemplo, en el HTML que está en línea en el Element, Puedes llamar updateFoo(), pero eso no sería posible desde dentro de un Template