Cuando mi casilla de verificación está marcada, se abre un cuadro de diálogo y cuando hago clic en cancelar, la casilla de verificación debe estar desmarcada.
No puedo hacer que esto suceda.
La casilla de verificación debe establecerse en su estado anterior si se selecciona "no" en el cuadro de diálogo (consulte las declaraciones if ).
Sin embargo, parece que configurar el modelo para la casilla de verificación, $scope.canSupportAccess , no tiene ningún efecto sobre la verificación de la casilla de verificación dentro de esta función.
He probado si $scope.canSupportAccess puede o no actualizar la casilla de verificación, al inicializarla con true y false , y puedo ver que sí marca o desmarca la casilla de verificación.
Noté que tengo que pasar canSupportAccess como argumento a la función, porque $scope.canSupportAccess no se actualiza dentro updateSupportAccess() aunque $scope.canSupportAccess es el modelo y updateSupportAccess() se activa cuando cambia la casilla de verificación.
¿Por qué $scope.canSupportAccess no tiene ningún efecto dentro de la función y cómo puedo actualizar la casilla de verificación dentro de la función updateSupportAccess() ?
¿Es esto por diseño, para evitar que updateSupportAccess() se llame recursivamente para siempre? Si es así, ¿cuál es el trabajo?
Aquí está mi código:
export default function (app) { app.controller('userDetailCtrl', [ 'shell', '$scope', function (shell, $scope) { $scope.canSupportAccess = false; $scope.updateSupportAccess = function (canSupportAccess) { if (canSupportAccess) { shell.confirmBox('Allow Access', 'Allow access?', 'YesNo', true) .result .then(function (result) { if (result === "yes") { $scope.canSupportAccess = true; } else { $scope.canSupportAccess = false; } }); } else { shell.confirmBox('Remove Access', 'Revoke access?', 'YesNo') .result .then(function (result) { if (result === "yes") { $scope.canSupportAccess = false; } else { $scope.canSupportAccess = true; } }); } } }] ); }y el HTML:
<input type="checkbox" id="supportAccess" ng-change="updateSupportAccess(canSupportAccess)" ng-model="canSupportAccess" /> <label for="supportAccess"> Allow access. </label>Esto está siendo causado por dos propiedades canSupportAccess diferentes que viven en diferentes ámbitos, un problema muy común en AngularJS. Intente hacer que su propiedad tenga al menos una capa separada de $scope y no adjunta directamente (por ejemplo $scope.access = { canSupport: false } ). Seguir la práctica recomendada de sintaxis "controlador como" evita de manera confiable este problema, y para ver un ejemplo de esta convención en acción donde puede jugar con ella, consulte las plantillas de demostración de AngularJS de StackBlitz .
Vea esta popular respuesta SO sobre el tema de la herencia prototípica en AngularJS para una inmersión profunda: https://stackoverflow.com/a/14049482/4028303