加载指令后调用函数 angularjs答案

【问题标题】：Call a function after the directive is loaded angularjs加载指令后调用函数 angularjs
【发布时间】：2016-05-12 14:08:49
【问题描述】：

我有一个独立的指令，我的控制器看起来像：

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-slider，并且希望在指令加载到 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');
});

更新

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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope timeout

【解决方案1】：

我为这类问题找到了 2 个解决方案，但仍然不能满足我真正需要 rz-slider 的目的。

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

【讨论】：

【解决方案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 内触发了窗口调整大小事件，但这将是一个临时的 hack。如果有人帮助我解决问题的真正方法，那就太好了。

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

【讨论】：