不注入html的指令

Question

我有一個指令，當我的value fee.pay設置爲true時，在表格中顯示一個小藍框。我所在的表格也是一個指令，但我認爲我們已經做好了堅持每個指令各自的範圍和兩者之間的同步值，儘管隨意指出最小的「這可能會導致某些事情」問題。

這裏是我正在使用的table指令的一部分，對於我正在做的這個應該足夠從這個文件，但我需要顯示整個文件沒有問題。 table.html

<tr><div ng-if="$index > 0"> 
        <div ng-if="defaultFee.Paid"> 
         Paid 
        </div> 
        <div ng-if="!defaultFee.Paid"> 
         <input type="button" class="button button-light-blue button-xSmall-text button-w130" 
              ng-value="defaultFee.pay === undefined ? 'Calculate and Pay' : 'Cancel'" 
              ng-click="calculateAndPay($index, defaultFee)" /> 
         <input type="button" ng-click="stupidShit(defaultFee)" value="woooh" /> 
        </div> 
       </div> 
      </td> 
     </tr> 

     <tr calculate-and-pay fee="defaultFee" project="project" ng-show="defaultFee.pay" index="$index" /></tr> 

該文件的js是。 grid.directive.js

 restrict: 'E', 
     scope: { 
      ngModel : '=', 
      fees : '=' 
     }, 
      // calculate and pay handled in controller to utilize 
      // the $state param to navigate to the calculation page 
      function calculateAndPay(index, fee) { 
       // if the passed fee is the initial major fee 
       // go to the initial fee calculation page 
       if ($.inArray(fee, $scope.locals.defaults) > -1 && index === 0) { 
        $state.go('^.^.fee.initial'); 
       } 
       else { 
        // display the calculate and pay 
        // input and pdf link 
        if (fee.pay === undefined) { 
         fee.pay = true; 
        } 
        // hide the calculate and pay 
        // input and pdf link 
        else { 
         validator.clearValidation(); 
         delete fee.pay; 
        } 
       } 
      } 
     templateUrl: '/ng-src/components/projects/edit/fee-payment/fee-payment-grid.template.html' 

未顯示指令的html是。 pay.template.html

該指令的js是。 pay.directive.js

 restrict: 'A', 
     replace: true, 
     scope: { 
      fee  : '=', 
      project : '=', 
      index : '=', 
     }, 
     controller: ['$scope', '$element', function($scope) { 
      $scope.locals = { 
       projectTypes : PROJECT_TYPES, 
       feeTypes  : FEE_TYPES, 
       payment  : {} 
      } 

     link: { 
      post: function postLink(scope, elem, attrs) { 
       // scope functions 
       scope.payFee = payFee; 

       ////////////////////////////////////////////////////////// 
       //saw in other questions similar to mine 
       //it gets hit when the ng-show value is changed but the 
       //the function show() doesn't do anything 
       //if (attrs.hasOwnProperty("ngShow")) { 
       // scope.$watch("ngShow", function (value) { 
       //  if (value) { 
       //   elem.show(); 
       //   elem.removeClass('ng-hide'); 
       //  } 
       //  else { 
       //   elem.hide(); 
       //  } 
       // }); 
       //} 

      templateUrl: '/ng-src/components/projects/edit/fee-payment/calculate-and-pay.template.html' 

快速運行。在表格中有一個名爲「計算和支付」的按鈕，您可以在table.html中的ng值中查看此文本。點擊這個時，在grid.directive.js中調用calculateAndPay（）函數。第一個條件if（$ .inArray（fee，$ scope.locals.defaults）> -1 & & index === 0）不會被命中，這是一個不同的測試用例。但是現在我想解決的問題也會影響到這個領域，如果它不是固定的。一旦在else中，第一個條件將該位更改爲true，這是ng-show正在監視的值（fee.pay = true）。一旦這個值被改變了，我就可以點擊pay.directive.js中的link.post（）函數，並且我可以看到每次更改值的時間。我發現它很奇怪，我無法查看我的innerHTML或elem.html（），這導致我相信我在模板上做了錯誤的事情，但我不知道是什麼。

任何幫助或建議非常感謝，如果我需要更好地解釋任何事情，請讓我知道。
謝謝你的幫助！

Answer 1

templateUrl是放錯了地方，我有它裏面後（）開始，現在是

link: { 
     post: function postLink(scope, elem, attrs) { 
      // scope functions 
      scope.payFee = payFee; 
     }, 
     templateUrl: '/ng-src/components/projects/edit/fee-payment/calculate-and-pay.template.html' 
}