Question

我有一个在以这种方式编码时正常工作的指令：

return {
            restrict: 'E',
            transclude: true, //transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside. So we can access the vm calling this.
            scope: { // As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.
                priceinformation: '=priceinformation'
            },
            controller: ['$scope','PriceCalculatorService', '$state', function ($scope,PriceCalculatorService, $state) {
                var controller={
                    _$state:$state,
                    pricinginfo: [],
                    };
                //console.log(PriceCalculatorService);
                //debugger;
                PriceCalculatorService.getPricingInfo()
                    .success(function (result) {
                        controller.pricinginfo = result;
                    })
                    .error(_handleError);

                function _handleError(error) {
                    controller.error = error;
                    controller._$state.go('error-404');
                }
               $scope.controller = controller;
                return controller;

            }],
            templateUrl: 'app/common/directives/views/price-calculator.html',

但是，我想隔离控制器，而是这样做：

 (function (app) {

    'use strict';

    // @see https://docs.angularjs.org/guide/directive
    // @important: Requires an object named pricinginformation is pushed into the directive.
    var PriceCalculatorControl = (function () {
        // scope is an isolated part of $scope limited this control only so we don't put a $
        var PriceCalculatorControl = ['scope','PriceCalculatorService', function PriceCalculatorControl(scope,PriceCalculatorService) {
            var control = {
                total: 0,
                subscriptionUnitprice: 100,
                totalcal: function totalcal() {
                    if (scope.priceinformation.subscriptioninfo.type == 'Daily') {
                        control.subscriptionUnitprice = 100;
                    }
                    else if (scope.priceinformation.subscriptioninfo.type == 'Monthly') {
                        control.subscriptionUnitprice = 500;
                    }
                    else {
                        control.subscriptionUnitprice = 100;
                    }
                    control.total = control.subscriptionUnitprice * scope.priceinformation.subscriptioninfo.period * scope.priceinformation.subscriptioninfo.subjectsselected;
                }
            };


            //kicking off the service
            PriceCalculatorService.getPricingInfo()
                    .success(function (result) {
                        controller.pricinginfo = result;
                    })
                    .error(_handleError);

                function _handleError(error) {
                    controller.error = error;
                    controller._$state.go('error-404');
                }

            // bootstrap


            /* When injecting stuff, clean them up here. Like a timer that's running needs to be stopped. 
            element.on('$destroy', function() {});*/
            //register on scope
                scope.PriceCalculatorControl.PriceCalculatorControl;
        }];
        PriceCalculatorControl[2]();

        return {
            restrict: 'E',
            transclude: true, //transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside. So we can access the vm calling this.
            scope: { // As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.
                priceinformation: '=priceinformation'
            },
            //controller: ['$scope','PriceCalculatorService', '$state', function ($scope,PriceCalculatorService, $state) {
            //    var controller={
            //        _$state:$state,
            //        pricinginfo: [],
            //        };
            //    //console.log(PriceCalculatorService);
            //    //debugger;
            //    PriceCalculatorService.getPricingInfo()
            //        .success(function (result) {
            //            controller.pricinginfo = result;
            //        })
            //        .error(_handleError);

            //    function _handleError(error) {
            //        controller.error = error;
            //        controller._$state.go('error-404');
            //    }
            //   $scope.controller = controller;
            //    return controller;

            //}],
            templateUrl: 'app/common/directives/views/price-calculator.html',
            link: PriceCalculatorControl
        };
    });

    // Register the directive

    app.directive('priceCalculator', PriceCalculatorControl);

})(angular.module('app.common'));

第二种方法不起作用。 scope.PriceCalculatorControl.PriceCalculatorControl;说PriceCalculatorControl未定义。 PriceCalculatorService.getPricingInfo()表示getPricingInfo未定义。注意：该服务正常运行。我想问题与依赖注入有关，但无法弄清楚是什么。请赐教。感谢。

Answer 1

试试这个：

(function (app) {

    'use strict';

    // @see https://docs.angularjs.org/guide/directive
    // @important: Requires an object named pricinginformation is pushed into the directive.
    var PriceCalculatorControl = (['PriceCalculatorService', function (PriceCalculatorService) {
        // scope is an isolated part of $scope limited this control only so we don't put a $
        var PriceCalculatorControl = function PriceCalculatorControl(scope) {
            var control = {
                total: 0,
                subscriptionUnitprice: 100,
                totalcal: function totalcal() {
                    if (scope.priceinformation.subscriptioninfo.type == 'Daily') {
                        control.subscriptionUnitprice = 100;
                    }
                    else if (scope.priceinformation.subscriptioninfo.type == 'Monthly') {
                        control.subscriptionUnitprice = 500;
                    }
                    else {
                        control.subscriptionUnitprice = 100;
                    }
                    control.total = control.subscriptionUnitprice * scope.priceinformation.subscriptioninfo.period * scope.priceinformation.subscriptioninfo.subjectsselected;
                }
            };


            //kicking off the service
            PriceCalculatorService.getPricingInfo()
                    .success(function (result) {
                        controller.pricinginfo = result;
                    })
                    .error(_handleError);

            function _handleError(error) {
                controller.error = error;
                controller._$state.go('error-404');
            }

            // bootstrap


            /* When injecting stuff, clean them up here. Like a timer that's running needs to be stopped.
             element.on('$destroy', function() {});*/
            //register on scope
            scope.PriceCalculatorControl.PriceCalculatorControl;
        };
        //PriceCalculatorControl[2]();

        return {
            restrict: 'E',
            transclude: true, //transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside. So we can access the vm calling this.
            scope: { // As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.
                priceinformation: '=priceinformation'
            },
            //controller: ['$scope','PriceCalculatorService', '$state', function ($scope,PriceCalculatorService, $state) {
            //    var controller={
            //        _$state:$state,
            //        pricinginfo: [],
            //        };
            //    //console.log(PriceCalculatorService);
            //    //debugger;
            //    PriceCalculatorService.getPricingInfo()
            //        .success(function (result) {
            //            controller.pricinginfo = result;
            //        })
            //        .error(_handleError);

            //    function _handleError(error) {
            //        controller.error = error;
            //        controller._$state.go('error-404');
            //    }
            //   $scope.controller = controller;
            //    return controller;

            //}],
            templateUrl: 'app/common/directives/views/price-calculator.html',
            link: PriceCalculatorControl
        };
    }]);

    // Register the directive

    app.directive('priceCalculator', PriceCalculatorControl);

})(angular.module('app.common'));

此外，我不确定这应该实现的目标：

PriceCalculatorControl[2]();

隔离Angularjs自定义指令中的控制器

1 个答案: