Вызова функции после того, как директива загружается angularjs

Question

У меня есть изолированная директива, мой контроллер выглядит следующим образом:

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

HTML, в файле выглядит следующим образом:

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

У меня есть директива связанных с HTML,

app.directive("incomeForm", ['$timeout', function ($timeout) { 
    function link($scope) { 
     var hello = function() { 
     alert("1"); 
     } 
     $timeout(hello, 0); 
    } 


    return { 
     restrict: 'E', 
     templateUrl: "app/zacks/your-income/income-form/income-form.html", 
     link: link, 
     controller: function ($scope, $timeout) { 
            $scope.$watch("zacks.AgeRet.value",function(newValue,OldValue,scope){ 
       if (newValue){ 
        alert((newValue)); 
       } 
      }); 
     } 
    } 
}]); 

Я хочу предупредить после загрузки директивы на странице, появляется предупреждение на i сама страница. Могу я знать, что делать?

Фактическая проблема заключается в том, что я использую rz-слайдер и хочу инициализировать его, как только директива загружена в DOM., Поскольку она не принимает предоставленные значения. Есть ли другой подход к этой проблеме?

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

В случае, если тайм-аут работы, я планирую инициализировать что-то вроде этого:

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

UPDATE

Добавлена ​​контроллер в директиве, так что теперь я способный получить значение, когда я перемещаю ползунок, но все же не могу инициализировать значение ползунка.

Answer 1

Решение 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:

Срабатывает событие окно изменения размера внутри $ таймаут, но это будет временный хак. Было бы здорово, если бы кто-нибудь помог мне с реальным подходом к решению проблемы.

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

Answer 2

Я нашел 2 решения для таких проблем, но все еще не служит цели, что мне действительно нужно с rz-слайдером.

Решение 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!'); 
    }; 
}]);