Question

我正在使用Ionic开发一个应用程序，我在更新控制器和工厂的值时遇到了问题

当我从另一个控制器更改时，该值不会自动更新

对不起我的英语，但我会讲西班牙语

Factory.js

aplicacion.factory("parametrosUsuarioFactory", function(){
var datos={
  nombre : '',
  imagenDePerfil:''
}

var interfaz = {
  actualizarNombre: function(nombreRecibido){
      datos.nombre = nombreRecibido;
  },
 obtenerNombre: function(){
        //console.log("Datos adentro:"+datos);
        return datos.nombre;
    },
    actualizarImagenDePerfil: function(imagenDePerfilRecibido){
        datos.imagenDePerfil = imagenDePerfilRecibido;
    },
    obtenerImagenDePerfil: function(){
        //console.log("Datos adentro:"+datos);
        return datos.imagenDePerfil;
    }


}
return interfaz;
})

Controller.js

$scope.nombre = parametrosUsuarioFactory.obtenerNombre();
$scope.imagenDePerfil = parametrosUsuarioFactory.obtenerImagenDePerfil();

的index.html

<p id="nombreMenu" style="padding: 10px 10px 4px;">{{nombre}}</p>
<div id="contenedorImagenDePerfil">
<img id="imagenDePerfil" src="{{imagenDePerfil}}"/>
</div>

Controller2.js

 parametrosUsuarioFactory.actualizarNombre(data.data.full_name);
parametrosUsuarioFactory.actualizarImagenDePerfil(data.data.profile_picture);
parametrosUsuarioFactory.actualizarIdUsuario(data.data.id);

Answer 1

问题是您将范围变量分配给服务器中的函数结果，而Angular无法查看这些变量的更新。

你有几个选择。有一种方法可以将函数视为Django Rest Framework support pagination from query parameter，但我发现这有点令人困惑。

您可以从服务中广播已进行更改，然后在控制器中监视该更改，并相应地更新范围变量。这是一个样本......

<强>的javascript

var aplicacion = angular.module('app', []);

aplicacion.factory("parametrosUsuarioFactory", function($rootScope) {
    var datos = {
        nombre: '',
        imagenDePerfil: ''
    }

    var interfaz = {
        actualizarNombre: function(nombreRecibido) {
            datos.nombre = nombreRecibido;
            $rootScope.$broadcast("datosActualizado");
        },
        obtenerNombre: function() {
            return datos.nombre;
        },
        actualizarImagenDePerfil: function(imagenDePerfilRecibido) {
            datos.imagenDePerfil = imagenDePerfilRecibido;
            $rootScope.$broadcast("datosActualizado");
        },
        obtenerImagenDePerfil: function() {
            return datos.imagenDePerfil;
        }
    }
    return interfaz;
});

aplicacion.controller("controller1", function($scope, parametrosUsuarioFactory) {
    $scope.obtenerDatos = function() {
        $scope.nombre = parametrosUsuarioFactory.obtenerNombre();
        $scope.imagenDePerfil = parametrosUsuarioFactory.obtenerImagenDePerfil();
    };

    $scope.$on("datosActualizado", function(){ $scope.obtenerDatos() });

    $scope.obtenerDatos();
});

aplicacion.controller("controller2", function($scope, parametrosUsuarioFactory) {
    $scope.actualizarValores = function() {
        parametrosUsuarioFactory.actualizarNombre("nombre de controller2");
        parametrosUsuarioFactory.actualizarImagenDePerfil("imagen de controller2");
    }
});

<强> HTML

<div ng-app="app">
    <div ng-controller="controller1">
        <h2>controller1</h2>
        Nombre: {{nombre}}<br>
        Imagen: {{imagenDePerfil}}
    </div>
    <br><br>
    <div ng-controller="controller2">
        <h2>controller2</h2>
        <button ng-click="actualizarValores()">
            Actualizar valores de controller1
        </button>
    </div>
</div>

这是一种方法的超简化示例。工作described here。

P.S。不要为你的英语道歉 - 它比我的西班牙语要好得多。：）

值控制器未随工厂更新

1 个答案: