在指令加载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));
                 }
             });
      }
   }
}]);

我想在页面中加载指令后发出警报，警报会出现在初始页面本身。我可以知道该怎么办吗？

实际的问题是，我使用的是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');
});

更新

在指令中添加了一个控制器，所以现在我可以在移动滑块时获得值，但仍然无法初始化滑块的值。

Answer 1

我为这类问题找到了两种解决方案，但仍然不能达到我真正需要的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!');   
    };
}]);

Answer 2

解决方案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);
    }
});

更新：

在$timeout内触发了窗口大小调整事件，但这将是一个临时破解。如果有人能帮我找到真正的方法来解决这个问题，那就太好了。

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