que ejemplos javascript angularjs angularjs-directive angularjs-scope

javascript - ejemplos - El valor del alcance aislado no cambia al hacer clic



innerhtml (3)

Esto está sucediendo porque angular evalúa "peter" como una expresión, es decir, un nombre de variable que no puede resolver. si quieres pasar una cuerda, simplemente ponla alrededor

Tengo un ejemplo simple en el que quiero mostrar la palabra "Peter" por plantilla de directivas. Cuando una persona hace clic en div, el nombre cambia a "Julieta". Sin embargo, no encuentro ningún error ni nada visible en la pantalla.

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <people name="peter"></people> <people name="peter"></people> <script> //app declaration var app = angular.module(''myApp'', []); //controller declaration app.controller(''myCtrl'', function($scope) { //code goes here ... }); //directive declaration app.directive(''people'', function() { return { restrict: ''E'', scope: {name:''=''}, template: ''<div ng-click="name = /'Juliet/'">{{name}}</div>'', } }); </script> </body> </html>


Porque peter es una variable si usas scope con "=" , entonces tienes que establecer algunos valores para esa variable dentro de tu controlador como

app.controller(''myCtrl'', function($scope) { //code goes here ... $scope.peter = ''John''; });

Entonces verás algo. La variable Peter no tenía valor, es por eso que no viste nada y no pudiste hacer clic para cambiar a ''Julieta''


Sí, me enteré un poco. Actualmente,

1) primero, debería haber usado ''@'' en vez de ''='', ya que quería que las directivas se separaran entre sí y al hacer clic en una de ellas no debería haber afectado el valor mostrado por otra directiva.

2) Segundo, debería haber usado el modelo (aquí $ scope.fname) para mostrar los valores en directivas en lugar de cadenas. (como lo dijo Kobi Chen)

2) En tercer lugar, debería haber envuelto el fname en las expresiones a la vista en las etiquetas de bigote.

El código completo es como se da:

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <people name="{{fname}}"></people> <people name="{{fname}}"></people> <script> //app declaration var app = angular.module(''myApp'', []); //controller declaration app.controller(''myCtrl'', function($scope) { $scope.fname = "Peter"; }); //5 directive declaration app.directive(''people'', function() { return { restrict: ''E'', scope: {name:''@''}, template: ''<div ng-click="name = /'Juliet/'">{{name}}</div>'', } }); </script> </body> </html>

Además, tomó ayuda de aquí:

¿Cuál es la diferencia entre ''@'' y ''='' en el alcance de la directiva en AngularJS?