Question

我在控制器中使用DOM操作，我知道它不正确！

但是，我需要知道如何创建一个指令，然后从控制器中调用它

这里是我正在进行DOM操作的控制器

$scope.myPopover = $popover(angular.element('#betConf'), { //<--
  title: 'Bet Confirmation',
  template: 'views/betConfirmModal.html',
  html: true,
  autoClose: true,
  placement: 'bottom',
  trigger: 'manual',
  animation: 'fx-bounce-right',
  scope: $scope
});

我这样称呼它

$scope.myPopover.show();

那么，我该怎么做才能制作一个指令，然后在那个控制器中调用它而不将指令直接放在DOM中？

编辑以更好地解释

函数$scope.myPopover与我调用的$scope.myPopover.show();，

在同一个控制器中

$scope.placeStraightBet = function(slip) {
  $scope.betId = '';
  var winValue = parseFloat(slip.risk, 10),
    riskValue = parseFloat(slip.win, 10),
    riskWin;
  // HERE CALL THE DIRECTIVE
  $scope.myPopover.show();
}

我需要的只是创建一个指令，并在这个控制器中调用它，如：

$scope.placeStraightBet = function(slip) {
  $scope.betId = '';
  var winValue = parseFloat(slip.risk, 10),
    riskValue = parseFloat(slip.win, 10),
    riskWin;
  // HERE CALL THE DIRECTIVE
  myDirective();
}

或：

$scope.myPopover = $popover(myElementDirective, {
  title: 'Bet Confirmation',
  template: 'views/betConfirmModal.html',
  html: true,
  autoClose: true,
  placement: 'bottom',
  trigger: 'manual',
  animation: 'fx-bounce-right',
  scope: $scope
});

我想要的就是避免在控制器中使用DOM。

Answer 1

您可以使用“show”属性创建一个指令，并在此属性更改时设置一个观察程序，如下所示：

angular.module('yourAppName')
  .directive('myPopover', function () {
    return {
      restrict: 'EA',
      scope: {
        show: '=',
      },
      link: function postLink($scope, element) {

        $scope.$watch('show', function(newVal, oldVal) {
          if(newVal && newVal !== oldVal) {
              $popover(element, { 
                 title: 'Bet Confirmation',
                 template: 'views/betConfirmModal.html',
                 html: true,
                 autoClose: true,
                 placement: 'bottom',
                 trigger: 'manual',
                 animation: 'fx-bounce-right',
                 scope: $scope.$parent
              }).show();

          }
        });            
      }
    };
  });

您的观点看起来像这样：

<my-popover show="showPopover"></my-popover>

通过将$ scope.showPopover设置为true来显示它：

$scope.placeStraightBet = function(slip) {
  $scope.betId = '';
  var winValue = parseFloat(slip.risk, 10),
    riskValue = parseFloat(slip.win, 10),
    riskWin;
  // HERE CALL THE DIRECTIVE
  $scope.showPopover = true;
}

Answer 2

采取Jack Shultz的一些答案，创建指令如下所示：

angular.module('bululu').directive('movement', function( $timeout, $interval) {
return {
    restrict: 'A',
    scope : {},
    link: function( scope, element, attrs ) {
      scope.elementsArray = ['facebook', 'linkedin', 'twitter', 'googleplus', 'mail', 'pinterest', 'behance', 'wordpress'];


      scope.moveElements = function() {
        $timeout(function(){
          for (var i = 0; i < scope.elementsArray.length; i++ ) {
            var top = Math.floor( ( Math.random() * 100 ) + 1 );
            var left = Math.floor( ( Math.random() * 100 ) + 1 );
            var target = document.getElementById(scope.elementsArray[i]);
            scope.element = angular.element(target);
            scope.element.css({
              'top': top + '%',
              'left': left + '%'
            });
          }
        }, 1000);
      };

      scope.moveElements();

      $interval( function() {
        scope.moveElements();
      }, 6000);

    },
 };

}）;

限制值定义了如何“调用”指令，如指令文档中所述： restrict选项通常设置为：

'A' - 仅匹配属性名称

<div movement></div>

'E' - 仅匹配元素名称

<movement></movement>

'C' - 仅匹配班级名称

<div class="movement"></div>

如果创建一个隔离的范围，那么指令div中的每个DOM元素都将使用范围。

<div movement>
    <button>Click here</button>
</div>

编辑：将指令的scope属性设置为false将与控制器共享作用域，函数和变量可以通过这种方式共享。

Answer 3

这是一个什么指令看起来像

的例子

angular.module('app.module', [])
.directive('myElementDirective', function() {
  return {
    restrict: 'A',
    title: 'Bet Confirmation',
    template: 'views/betConfirmModal.html',
    html: true,
    autoClose: true,
    placement: 'bottom',
    trigger: 'manual',
    animation: 'fx-bounce-right',
    scope: $scope
  };
});

然后在您的html模板中，您可以将此指令指定为属性

<div my-element-directive></div>

如何从控制器调用指令？

3 个答案: