2016-01-14 22 views
0

目前我正试图运行一个函数来处理指令加载后的大小调整。总是,该函数在内容加载到指令之前运行,因此它不能正确调整大小。指令加载后的运行函数

下面是代码的片段,我使用:

$scope.myToggleFunctionForDirective() = function(){ 
     $scope.changeableVariable = !$scope.changeableVariable 
     myResizeFunction(); 
    } 
    window.myResizeFunction = function(){   
     //do something 
    } 

的HTML看起来像这样

<button ng-click="myToggleFunctionForDirective()"></button> 
    <my-directive ng-if="changeableVariable"></div> 

该指令包含从服务器的一些异步调用。

任何关于如何等待指令完成加载然后将函数应用于由指令创建的内容的想法都是受欢迎的。

我试过寻找$广播和$发射,但由于某种原因,它似乎并没有为我工作。

在此先感谢。

编辑1:我更新了代码,以更多地反映我在项目中的内容。

+0

如何将'ng-if'改为'ng-show'? –

+0

@Egan不幸的是,如果切换变量设置为false,则ng-show不会从指令中重置范围。 – Scombine

回答

0

为什么没有指令中的控制器,并从那里制作按钮?

angular.module('myApp') 
    .directive('myToggleButton', myToggleButton); 

/* @ngInject */ 
function myToggleButton() { 
    var directive = { 
     restrict: 'E', 
     bindToController: true, 
     controller: myToggleController, 
     // your other directive pieces, scope, restrict, etc 
    }; 
    return directive; 
} 

function myToggleController() { 
    var vm = this; 
    vm.reSize = reSize; 

    function reSize() {   
     //do something 
    } 
} 

在您的按钮:

<my-toggle-button data-ng-click="vm.reSize()"></my-toggle-button> 
+0

谢谢你的回复。无论指令是否存在以及它处理与页面不同的div,特殊调整大小函数都可以工作。当指令加载时,它调整特定的div和指令。在指令中包含resize函数将会阻止正常的div调整自身的大小。 – Scombine

0

我设法通过设置在$ rootScope变量,在我的网页加入对它的观察者来解决这种情况。在指令中,我将该特定变量设置为true,并且在页面中,一旦满足某些条件,该变量将设置为false。希望这会帮助他人解决问题。

//app.js file: 
$rootScope.myVariable = false; 

//directive file 
$rootScope.myVariable = true 

//main page file: 
$rootScope.$watch ('myVariable', function(){ 
    if($rootScope.myVariable){ 
     myResizeFunction(); 
    } 
}); 

$scope.myToggleFunctionForDirective() = function(){ 
    $scope.changeableVariable = !$scope.changeableVariable 
    if($scope.changeableVariable) { 
     $rootScope.myVariable = false 
    } 
} 
相关问题