Alcance de la directiva personalizada en AngularJS

1. Alcance de la directiva personalizada en AngularJS
2. Usar el Scope: False o Shared Scope en AngularJS
3. Utilice el Scope: True o Inherited Scope en AngularJS
4. Utilizar el Scope : {} o Isolated Scope en AngularJS
5. Use el enlace @ o unidireccional en AngularJS
6. Use el = o enlace bidireccional en AngularJS
7. Use el & o enlace de método en AngularJS

El alcance permite que AngularJS se asegure de que otro objeto no pueda cambiar accidentalmente un objeto. Lo hace creando una nueva copia del objeto y almacenándola en la memoria.

El ámbito también se utiliza como medida de seguridad, evitando que los usuarios no autorizados accedan a los objetos de la página. Este artículo cubrirá diferentes opciones y tácticas relacionadas con el alcance, como el uso de un alcance compartido, heredar el alcance principal y el alcance aislado.

Alcance de la directiva personalizada en AngularJS

El alcance de AngularJS es uno de los conceptos esenciales en AngularJS. El ámbito se utiliza para determinar la visibilidad de variables y funciones específicas.

Hablemos de dirección; si queremos una función única en una aplicación y queremos utilizarla en toda la sección de la aplicación, debemos escribir un conjunto de códigos. Se conoce como directivas en Angular.

Un alcance está vinculado con todas las directivas. Este ámbito se utiliza para acceder a datos y métodos dentro de la plantilla.

Las directivas no establecen su alcance por defecto a menos que se establezca específicamente. Como resultado, las directivas tratan el alcance de su padre como propio.

Al proporcionar un objeto de configuración definido como el objeto de definición de directiva a AngularJS, podemos cambiar el alcance predeterminado de las directivas. Profundicemos en el tema.

Usar el Scope: False o Shared Scope en AngularJS

Genera un ámbito único que es idéntico a su ámbito principal, lo que implica que cualquier cambio en el ámbito principal se reflejará en el ámbito de la directiva y viceversa.

JavaScript:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Código HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

En este ejemplo, cuando modificamos el nombre del cuadro de texto, el nombre del encabezado también cambia. La directiva utiliza su alcance principal porque el DDO no lo incluye aquí.

Como resultado, cualquier cambio que hagamos dentro de la directiva también se aplica en el ámbito principal. Haga clic aquí para verificar el funcionamiento del código como se mencionó anteriormente.

Utilice el Scope: True o Inherited Scope en AngularJS

Es un alcance derivado en lugar del alcance de un padre. Los cambios no se reflejarán en el ámbito del controlador si modifica el ámbito de la directiva.

Sin embargo, las modificaciones al ámbito principal se reflejarán en el ámbito de la directiva.

Código JavaScript:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Código HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

En este ejemplo, el valor del ámbito principal se mostrará en la pantalla. Pero, ¿qué sucede si modificamos el valor en el cuadro de texto?

Entonces solo se cambiará el ámbito secundario. Indica que el ámbito principal no ha cambiado.

Haga clic aquí para verificar el funcionamiento del código como se mencionó anteriormente.

Utilizar el Scope : {} o Isolated Scope en AngularJS

El ámbito aislado es uno de los aspectos más significativos. La directiva construirá un nuevo objeto de ámbito aquí, pero el ámbito principal no heredará; por lo tanto, no conocerá el ámbito principal.

Sin embargo, ¿cómo podemos recuperar los datos y cómo podemos editarlos si no nos conectamos con el ámbito principal? La respuesta es poner el atributo de la entidad en DDO; sin embargo, primero debe establecer los atributos en la directiva.

Usamos tres prefijos en un ámbito aislado para ayudar a vincular la propiedad o los métodos del controlador con las directivas. Echemos un vistazo a cómo funciona esto.

Cuando una directiva descubre cualquier prefijo en su propiedad de alcance en DDO, los vuelve a verificar en la declaración de la directiva en la página HTML donde se invoca la directiva usando el atributo declarado.

Después de cualquiera de los prefijos, podemos dar un nombre de atributo diferente para modificar el nombre.

AngularJS tiene tres tipos de prefijos.

1. @ - Enlace unidireccional
2. = - Encuadernación directa de modelos/encuadernación bidireccional
3. & - Enlace de método

Use el enlace @ o unidireccional en AngularJS

El enlace unidireccional significa que un padre envía algo al ámbito de la directiva a través del atributo reflejado en la directiva. Sin embargo, cualquier cambio en la directiva no se reflejará en el padre.

Los valores de cadena se pasan usando el símbolo @.

Código JavaScript:

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

Código HTML:

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

Haga clic aquí para ver la demostración en vivo del código anterior.

Use el = o enlace bidireccional en AngularJS

Se usa para pasar un objeto a una directiva en lugar de una cadena. Esta entidad podría modificarse tanto desde el lado padre como desde el lado directivo.

Por eso se dice que es bidireccional. Para usar el enlace bidireccional, debe colocar el signo = en el lugar del alcance.

scope: {

 name: "="

}

Use el & o enlace de método en AngularJS

Se utiliza para conectar el método de cualquier padre al ámbito de la directiva. Podemos usar esto cada vez que llamemos a los métodos principales de la directiva.

Se utiliza para invocar funciones que actualmente no están dentro del alcance. Para usar el enlace del método, debe colocar el símbolo & en lugar del alcance.

scope: {
     name: "&"
}

Eso es todo; si todavía está confundido, lea la documentación oficial haciendo clic aquí.