加载指令后运行函数答案

【问题标题】：Run function after directive is loaded加载指令后运行函数
【发布时间】：2016-01-14 20:39:32
【问题描述】：

目前我正在尝试运行一个在加载指令后处理调整大小的函数。始终，该函数在指令中加载内容之前运行，因此它不会正确调整大小。

这是我正在使用的代码的 sn-p：

    $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>

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

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

我尝试查看 $broadcast 和 $emit，但由于某种原因，它似乎对我不起作用。

提前致谢。

EDIT1：我更新了代码以更多地反映我在项目中的内容。

【问题讨论】：

把ng-if改成ng-show怎么样？
@Egan ng-show 不幸的是，如果切换变量设置为 false，则不会从指令重置范围。

标签： javascript jquery html angularjs

【解决方案1】：

为什么不在指令中包含一个控制器，然后从那里制作按钮？

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>

【讨论】：

感谢您的回复。无论指令是否存在，特殊的调整大小功能都有效，并且它处理来自页面的不同 div。当指令加载时，它会调整特定 div 和指令的大小。在指令中包含 resize 函数将阻止普通 div 自行调整大小。

【解决方案2】：

我设法通过在 $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
   }
}

【讨论】：