AngularJS“驗證”指令無法正確編譯

Question

我正在嘗試編寫一條指令，將其添加到按鈕元素周圍的包裝div中時，將在調用給定操作時添加驗證步驟。 如果用戶單擊“危險”按鈕，則該按鈕將消失並由內部帶有復選標記的紅色按鈕代替。 當他們單擊復選標記時，將調用該操作，並且按鈕將返回其正常狀態。

目前，我的指令遇到以下問題：

• 即使 scope.verify 更改，單擊原始按鈕也不會顯示“驗證”按鈕。
• 在出於測試目的將scope.verify缺省設置為true后，單擊“驗證”按鈕不會調用預期的操作

的HTML

<div verify>
  <label class="btn btn-default" data-click="resetFilters()">Clear Filters</label>
</div>

角度的

angular.module("App").directive "verify", ["$compile",
  ($compile) ->

    directive = {}

    # This directive should be an attribute
    directive.restrict = "A"

    # We do not want to replace any HTML
    directive.replace = false

    # Skip the compilation of other directives
    directive.terminal = true

    # Compile this directive first
    directive.priority = 1001

    directive.link = (scope, element, attrs) ->

      # Remove verify attribute to prevent infinite compile loop
      element.removeAttr "verify"
      element.removeAttr "data-verify"

      # Select the element under the "verify" div, store the "click"
      # function and remove it from the element
      first = angular.element(element.children()[0])
      clickAction = first.attr "click" || first.attr "data-click"
      first.removeAttr "click"
      first.removeAttr "data-click"

      # Create a new element from the first one. This will become the
      # verify button
      second = first.clone()

      # Add the new element to the DOM
      element.append second

      # Add some custom ngShow / ngHide animation classes
      first.addClass "fader-down"
      second.addClass "fader-up"

      # Specify when each element should show / hide
      first.attr "ng-hide", "verify"
      second.attr "ng-show", "verify"

      # Design the verify button
      second.html "<span class=\"glyphicon glyphicon-ok\"</span>"
      second.addClass "btn-danger"

      # Initially, only the original button should be visible
      scope.verify = false

      # When the user clicks on the original button, hide it and show
      # the verify button
      first.bind "click", ->
        scope.verify = true

      # When the user clicks on the second element, the "verify"
      # button, evaluate the specified "click" action. Hide the verify
      # button and show the original button
      second.bind "click", ->
        scope.$eval clickAction
        scope.verify = false

      # Compile the element
      $compile(element)(scope)
      # $compile(element.contents())(scope) # This doesn't work either

    return directive

]

Answer 1

bind()是一個jqLit​​e方法（如果要在Angular之前加載jQuery，則是jQuery方法），不會為您觸發摘要周期。 您必須通過將其包裝在對scope.$apply()的調用中來手動觸發它：

first.bind('click', function () {
  scope.$apply(function () {
    scope.verify = true;
  });
});

和：

second.bind('click', function() {
  scope.$apply(function() {
    scope.$eval(clickAction);
    scope.verify = false;
  });
});

演示： http : //plnkr.co/edit/57X7IBcxafkN2U6W5IhE?p=preview