Question

我有一个类似下面代码的指令。它工作正常，但我不得不求助于创建内联模板代码，因为我不希望模板在click事件被触发之前呈现。但如果我可以分配指令模板并延迟渲染直到事件被触发，那将会更清晰。

有办法做到这一点吗？

(function() {
  app.directive("nodeTabset", function($compile) {
    return {
      restrict: "A",
      scope: '&',
      controller: [
        '$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile) {
          var TABS;

          // Ad hoc template
          TABS = "<div id='node-tabset-wrapper'>\n  <div id='node-tabset'>\n    <div>Set Attribute</div>\n    <div ng-show='node.name == \"a\"'>Set Scrape Job</div>\n  </div>\n  <div id='node-tabset-corner'></div>\n</div>";

          $scope.selectNode = function(node) {
            node.addClass("selected");
            node.prepend(TABS);
            $compile(node.children()[0])($scope);
            return $scope.$apply();
          };
          return $scope.evaluateSelection = function($event) {
            var parent, 
            parent = angular.element($event.currentTarget).parent();

            // do some stuff
             return $scope.selectNode(parent);
          };
        }
      ],
      link: function(scope, element, attrs, controller) {
        return element.bind('click', scope.evaluateSelection);
      }
    };
  });

}).call(this);

Answer 1

我认为您需要查看promise库 $q

Answer 2

ng-if。它将删除元素，直到表达式为true并创建它，新范围和所有。绑定您的点击以将bool更改为true并在ng-if中设置该bool。

Angular - 如何在事件触发之前保持渲染模板？

2 个答案: