Question

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

以下是我正在使用的代码片段：

    $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：我更新了代码，以更多地反映我项目中的内容。

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

Answer 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
   }
}

加载指令后运行函数

2 个答案: