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?