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-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');
});

更新

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

Answer 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!');   
    };
}]);

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);

在指令加载angularjs后调用函数

2 个答案: