eine Funktion aufrufen, nachdem die Richtlinie AngularJS geladen wird

Question

ich eine isolierte Richtlinie haben, sieht mein Controller wie:

app.controller('ZacksController', ['$scope', '$http', 'ngDialog', '$timeout', function($scope, $http, ngDialog, $timeout){ 
    //some code here 
}]); 

Der HTML-Code in der Datei wie folgt aussieht:

<div class="income-older-block" ng-show="selectedAge!=1"> 
    <income-form></income-form> 
</div> 

ich eine Richtlinie haben in verwandter HTML-Ordner,

Ich möchte nach dem Laden der Direktive auf der Seite warnen, die Warnung erscheint bei i nitial Seite selbst. Darf ich wissen, was ich tun soll?

Das eigentliche Problem ist, ich benutze einen RZ-Slider und möchte es initialisieren, sobald die Direktive zu DOM geladen wird, da es die angegebenen Werte nicht übernimmt. Gibt es einen anderen Ansatz für dieses Problem?

<rzslider rz-slider-model="zacks.AgeRet.value" rz-slider-floor="zacks.AgeRet.floor" rz-slider-ceil="zacks.AgeRet.ceil"></rzslider> 

Im Fall, wenn das Timeout funktioniert, ich plane, so etwas zu initialisieren:

$timeout(function() { 
    $scope.$broadcast('rzSliderForceRender'); 
}); 

UPDATE

Added einen Controller in der Richtlinie, so dass ich jetzt bin Ich kann den Wert abrufen, wenn ich den Schieberegler bewege, aber den Wert des Schiebereglers immer noch nicht initialisieren kann.

Answer 1

Lösung 2

HTML:

<div class="income-older-block" ng-show="selectedAge!=1"> 
    <income-form></income-form> 
</div> 

JS:

app.controller('ZacksapiController', ['$rootScope', '$scope', '$http', 'ngDialog', '$timeout', 'dataService', function($rootScope, $scope, $http, ngDialog, $timeout, dataService){ 

$scope.$watch('selectedAge', function(newValue, oldValue) {   
    if (newValue !== oldValue) {   
      $timeout(function() { 
       alert("reCalcViewDimensions"); 
       $scope.$broadcast('rzSliderForceRender'); // This is not working, but alert works. 
      }, 0); 

    } 
}); 

Update:

das Fenster Resize-Ereignis innerhalb des $ timeout Triggered, aber dies würde eine vorübergehende Hack. Wäre toll, wenn mir jemand mit dem richtigen Ansatz helfen würde, das Problem zu lösen.

$timeout(function() { 
    window.dispatchEvent(new Event('resize')); 
    $scope.$broadcast('rzSliderForceRender'); 
}, 0); 

Answer 2

Ich fand 2 Lösungen für diese Art von Problemen, aber immer noch nicht den Zweck dessen, was ich wirklich brauche mit RZ-Slider.

Lösung 1

HTML:

<div ng-controller="ZacksController"> 
    <after-render after-render="rzSliderForceRender">element</after-render> 
</div> 

JS:

var app = angular.module('myApp',[]); 
app.directive('afterRender', ['$timeout', function ($timeout) { 
    var def = { 
     restrict: 'E',   
     link: function (scope, element, attrs) { 
      $timeout(scope.$eval(attrs.afterRender), 0); //Calling a scoped method 
     } 
    }; 
    return def;     
}]); 

app.controller('ZacksController', ['$rootScope', '$scope', '$http', '  $timeout', function($rootScope, $scope, $http, $timeout){ 

    $scope.rzSliderForceRender = function() 
    { 
     alert('Fired!'); 
    }; 
}]);