如何從控制器調用指令？

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.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);

    },
 };

}）;

限制值定義了如何“調用”指令，如《指令文檔》中所述：限制選項通常設置為：

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