值控制器不会更新与工厂

Question

我开发与离子的应用程序，我有更新控制器和工厂的价值

，当我从另一个控制器改变值不会自动更新问题

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

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

的问题是，你正在分配的范围变量的函数在你的服务器的结果和角度不能观看那些更新。

你有几个选项。有一种方法可以将功能看作described here，但我觉得有些混乱。

您可以从您的服务广播中进行更改，然后在您的控制器中注意并适当更新范围变量。下面是一个示例...

的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> 

这是一个方法的超简化的例子。工作JSFiddle。

P.S.不要为你的英语道歉 - 这比我的西班牙语好得多。 :)