Question

我希望在页面上显示元素后触发角度函数。

该元素是SPA的一部分，其中显示的内容由一大堆事件控制（因此在页面加载时执行操作不起作用）。此元素的父元素（以及元素本身）的显示由ng-if控制，该函数调用单独的函数。由于父函数在函数返回之前不显示，因此没有逻辑位置来包含逻辑来改变该函数中的这个子元素，并且由于ng-if而由于它被调用，所以没有父函数来放置上一个函数返回后的代码。

我目前通过将函数与我的逻辑放在其中来实现这一点，该函数总是在元素的子元素中返回true，该元素具有正确的，有用的ng-if，因为它将作为元素可以选择显示。虽然这确实有效，但我觉得这是一个非常狡猾的解决方案。 是否有更“适当”的方法来实现这一目标？

HTML的片段（为了问题而更改了函数名称）：

<div data-ng-if="shouldTheButtonDisplay()">
    <a class="btn"
       data-ng-click="irrelevantToQuestion()"
       data-ng-if="functionToPerformOnceElementLoaded()"
       href="#">
        button text
    </a>
</div>

JS的片段（细节已更改，因为与问题无关）：

$scope.shouldTheButtonDisplay() {
    return booleanThatIsRelevantInContext;
}

$scope.functionToPerformOnceElementLoaded = function() {
    // Edit state of button (technically an anchor)
    var firstRowButton = document.querySelector("a.btn");
    firstRowButton.style.background = "green";

    return true;
}

Answer 1

我会这样做的：

angular
  .module('yourModuleName', [])
  .controller('yourControllerName', yourControllerNameCtrl)
  .directive('yourDirectiveName', yourDirectiveNameDirective);


yourControllerNameCtrl.$inject = ['$scope'];

function yourControllerNameCtrl($scope)
{
    $scope.message = 'In controller';
  
    $scope.irrelevantToQuestion = function() {};
}


function yourDirectiveNameDirective()
{
    function doSomethingElse(scope)
    {
        scope.message = 'In directive';
    }
  
    return {
        restrict: 'A',
        scope: 'falsy',
        link: function(scope, element)
        {
            element.find('a').addClass('green');
          
            doSomethingElse(scope);
        }
    };
}

.btn {
  background-color: red;
}
.btn.green {
  background-color: green;
}

<html ng-app="yourModuleName">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  </head>
  <body ng-controller="yourControllerName">
    <div>{{ message }}</div>
    
    <div your-directive-name>
      <a class="btn"
         data-ng-click="irrelevantToQuestion()"
         href="#">
        button text
      </a>
    </div>
  </body>
</html>

加载元素后执行函数 - angular

1 个答案: