2016-05-12 101 views
1

我有一個隔離的指令後,我的控制器看起來像:調用函數指令被加載angularjs

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

我想警告我加載頁面中的指令後,警報出現在我nitial頁面本身。我可以知道該怎麼辦?

實際的問題是我使用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'); 
}); 

UPDATE

中添加了指令的控制器,所以現在我能夠在移動滑塊時獲取該值,但仍無法初始化滑塊的值。

回答

0

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

    } 
}); 

更新:

觸發$超時內的窗口resize事件,但是這將是一個暫時的黑客攻擊。如果有人幫助我解決問題的真正方法,那將會很棒。

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

我發現了這兩類問題的解決方案,但仍然沒有達到我真正需要的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!'); 
    }; 
}]);