angularJS $ emisión y $ en

rootscope angularjs

Question

¿Hay alguna manera de hacer que $ broadcast propague la variable a $ on durante la fase de inicialización?

<div ng-app=''test''>
    <div ng-controller=''testCtrl''> <span>{{testContent}}</span> 
    </div>
    <div ng-controller="testCtrl2">
        <input type=''text'' ng-change="updateContent()" ng-model="testContent2" />
    </div>
</div>

var app = angular.module(''test'', []);
app.factory(''sharedContent'', function ($rootScope) {
    var standardContent;
    var resizeProportion;
    return {
        setStandardContent: function (newStandardContent) {
            standardContent = newStandardContent;
            $rootScope.$broadcast(''updateContent'');
            console.log(''broadcast'');
        },
        getStandardContent: function () {
            return standardContent;
        },
        setResizeProportion: function (newResizeProportion) {
            $rootScope.$broadcast(''updateResizeProportion'');
        },
    }
});
app.run(function (sharedContent) {
    sharedContent.setStandardContent(''haha'');
});

function testCtrl($scope, sharedContent) {
    $scope.testContent;
    $scope.$on(''updateContent'', function () {
        console.log(''receive'');
        $scope.testContent = sharedContent.getStandardContent();
    });
}

function testCtrl2($scope, sharedContent) {
    $scope.testContent2 = ''test'';
    $scope.updateContent = function () {
        sharedContent.setStandardContent($scope.testContent2);
    };
}

Fiddle de muestra: http://jsfiddle.net/jiaming/NsVPe/

El span mostrará el valor a medida que la entrada cambie, lo cual se debe a la función ng-change.

Sin embargo, en la fase de inicialización, el valor "haha" no se propagó al $ scope.testContent y, por lo tanto, no se mostró nada en el primer tiempo de ejecución. ¿Hay alguna manera de hacer que el valor "jaja" aparezca en el primer tiempo de ejecución?

Gracias.

Answer 1

La razón de esto es que el ng-change desencadena con los cambios posteriores en el modelo identificado por testContent2 . Cuando el controlador se inicializa, se le asigna el valor "prueba". ng-change luego mantiene un registro de los cambios subsiguientes; la asignación inicial no es apta para esto, solo lo hacen los cambios posteriores.

http://jsfiddle.net/vZwy4/ - He actualizado el violín proporcionado por usted. Aquí puede ver que la etiqueta span está correctamente poblada con los datos.

Lo que tenía que hacer era usar la función ng-change del alcance en lugar de usar ng-change . Por lo tanto, elimine la directiva ng-change del cuadro de entrada y elimine el método updateContent . En su lugar, reemplácelo con el siguiente código en el que vea los cambios en el modelo testContent2 :

$scope.$watch(''testContent2'', function () {
    if ($scope.testContent2 === undefined || $scope.testContent2 === null) {
        return;
    }

    sharedContent.setStandardContent($scope.testContent2);

});

Ahora puede ver que la palabra "prueba" (no pude encontrar nada que ver con "jaja") aparece en el momento en que se carga la página. Los cambios posteriores a la entrada también se actualizan en el span . Espero que esto sea lo que estabas buscando.

Answer 2

Lo que no está teniendo en cuenta es que la fase de run de la aplicación se ejecuta antes de que se inicialicen los controladores. Debido a que los mensajes emitidos no se almacenan en búfer y solo se transmiten a los oyentes que están escuchando en el momento en que se crea el mensaje, el valor haha se pierde.

En su caso, sin embargo, es bastante fácil hacerlo funcionar con un pequeño cambio en su controlador:

function testCtrl($scope, sharedContent) {
  updateTestContent();
  $scope.$on(''updateContent'', updateTestContent);

  function updateTestContent(){
     $scope.testContent = sharedContent.getStandardContent();
  }
}

Bifurqué su JSFiddle aquí http://jsfiddle.net/y3w5r01d/2/ donde puede ver en la consola cuando se ejecuta cada función (ejecución y controladores).

Answer 3

Solo proporcione un poco de retraso usando la función $timeout . Simplemente actualice el código en la fábrica, comenzará a funcionar.

Por favor, consulte el siguiente código para la fábrica:

app.factory(''sharedContent'', function ($rootScope,$timeout) {
    var standardContent;
    var resizeProportion;
    return {
        setStandardContent: function (newStandardContent) {
            standardContent = newStandardContent;
            $timeout(function(){
              $rootScope.$broadcast(''updateContent'');
            },0)
             console.log(''broadcast'');
        },
        getStandardContent: function () {
            return standardContent;
        },
        setResizeProportion: function (newResizeProportion) {
            $rootScope.$broadcast(''updateResizeProportion'');
        },
    }
});