Question

我有2个嵌入另一个指令的指令。 “父”指令的HTML如下所示：

show default: {{ controller.display.stripe }}

<div>
    <p ng-if="controller.display.stripe">Display default</p>
    <p ng-if="!controller.display.stripe">Do not display default</p>
</div>


<div apple-pay="controller.applePayAvailable(available)"></div>
<div stripe-pay ng-if="controller.display.stripe"></div>

如您所见，仅当 controller.display.stripe 为true时，才会显示 stripe-pay 指令。布尔值最初设置为false。以下是付款指令的控制器：

(function () {
    'use strict';

    angular.module('widget-directives').controller('PaymentsController', paymentsController);

    paymentsController.$inject = ['$scope']

    function paymentsController($scope) {
        var self = this;

        // Bindings
        self.display = {
            stripe: false
        };

        // Method binding
        self.applePayAvailable = applePayAvailable;
        self.checkout = checkout;

        //////////////////////////////////////////////////

        function applePayAvailable(available) {
            console.log('is apply pay available: ' + available);
            self.display.stripe = !available;
            console.log(self);
        };

        function checkout(e) {

            console.log('checking out');

            e.preventDefault();
        };
    };
})();

正如您所看到的， self.display.stripe 设置为与子指令返回的内容相反。这里的控制台日志都已到达，console.log(self)将布尔值显示为 true ，但html ng-if的工作方式就像布尔值为false一样。我尝试在 PaymentsController 中设置一个手表，但它没有效果。

有谁知道我能做些什么来解决这个问题？作为参考， apple-pay 指令和控制器如下所示：

(function () {
    'use strict';

    angular.module('widget-directives').directive('applePay', applePay);

    function applePay() {
        return {
            restrict: 'A',
            controller: 'ApplePayController',
            controllerAs: 'controller',
            bindToController: true,
            scope: {
                onCheckComplete: '&applePay'
            },
            templateUrl: 'app/directives/apple-pay/apple-pay.html',
            link: function (scope, element, attrs, controller) {
                element.find('button').bind('click', controller.checkout);
            }
        };
    };
})();


(function () {
    'use strict';

    angular.module('widget-directives').controller('ApplePayController', applePayController);

    applePayController.$inject = ['applePayService'];

    function applePayController(applePayService) {
        var self = this;

        console.log('should only be called once');

        // Method binding
        self.checkout = checkout;

        init();

        //////////////////////////////////////////////////

        function init() {
            applePayService.checkAvailability(setAvailability);
        };

        function setAvailability(available) {
            self.available = available === true;
            self.onCheckComplete({ available: self.available });
        };

        function checkout(e) {
            applePayService.checkout(e, onComplete, onError);
        };

        function onComplete(result, completion) {
            console.log(result, completion);
        };

        function onError(error) {
            self.error = error;
        };
    };
})();

Answer 1

我不确定applePayService.checkAvailability的工作原理，所以我只需在setAvailability声明之后使用false参数调用setAvailability，所以在我的情况下它的工作，{{1}正在开火。

购买你可以尝试使用超时适用

来包裹ng-if

applePayAvailable

 function applePayAvailable(available) {
            setTimeout(function(){
              console.log('is apply pay available: ' + available);
              self.display.stripe = !available;
              console.log(self);
              $scope.$apply();
            }, 0)
        };

    var app = angular.module('widget-directives', []);

    app.controller('PaymentsController', paymentsController);

    function paymentsController($scope) {
        var self = this;
        
        var controller = this;
        
        console.log('controller', controller)

        // Bindings
        self.display = {
            stripe: false
        };

        // Method binding
        self.applePayAvailable = applePayAvailable;
        

        //////////////////////////////////////////////////

        function applePayAvailable(available) {
            //setTimeout(function(){
            console.log('is apply pay available: ' + available);
            self.display.stripe = !available;
            console.log(self);
            //$scope.$apply();
            //}, 0)
        };

        function checkout(e) {

            console.log('checking out');

            e.preventDefault();
        };
    };

     app.directive('applePay', applePay);

    function applePay() {
        return {
            restrict: 'A',
            controller: 'ApplePayController',
            controllerAs: 'controller',
            bindToController: true,
            scope: {
                onCheckComplete: '&applePay'
            },
            template: '<div></div>',
            link: function (scope, element, attrs, controller) {
                console.log('scope', scope)
                element.find('button').bind('click', controller.checkout);
            }
        };
    };


   app.controller('ApplePayController', applePayController);


    function applePayController($scope) {
        var self = this;

        console.log('should only be called once', $scope);

        // Method binding
        //self.checkout = checkout;

        init();

        //////////////////////////////////////////////////

        function init() {
            //applePayService.checkAvailability(setAvailability);
        };

        function setAvailability(available) {
            self.available = available === true;
            $scope.onCheckComplete({ available: self.available });
        };
        
        setAvailability(false);


        function onComplete(result, completion) {
            console.log(result, completion);
        };

        function onError(error) {
            self.error = error;
        };
    };

带有布尔显示标志的bindToController指令

1 个答案: