Question

当我的值fee.pay设置为true时，我有一个指令在表格中显示一个小蓝框。我所在的表格也是一个指令，但我认为我们已经做好了工作，坚持每个指令各自的范围和两者之间的同步值，尽管可以自由地指出最小的，“这可能会导致一些东西”问题。

这是我正在使用的表指令的一部分，因为我正在做的这应该足够来自这个文件，但我需要显示整个文件没有问题。 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-value中查看此文本。单击此按钮时，将在grid.directive.js中调用calculateAndPay（）函数。第一个条件if（$ .inArray（费用，$ scope.locals.defaults）＆gt; -1＆amp;＆amp; index === 0）将不会被命中，这是一个不同的测试用例。但是我现在要修复的内容如果没有修复，也会影响该区域。一旦在else中，第一个条件将该位更改为true，这是ng-show正在观看的值（fee.pay = true）。一旦值被更改，我就可以点击pay.directive.js中的link.post（）函数，我就能看到每次更改值的时间。我觉得很奇怪，我无法查看我的innerHTML或elem.html（），这让我相信我对模板做错了但我不知道是什么。

非常感谢任何帮助或建议，如果我需要更好地解释，请告诉我感谢您的任何帮助！

Answer 1

templateUrl在错误的地方，我最初在post（）里面，它现在是

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

指令不注入html

1 个答案: