Question

当我需要有多个范围时，使用指令我结束了。我正在使用Mongoose Node，Express和D3JS构建数据可视化应用程序。

这是指令

angular.module('prodsChart', [])
.controller('businessCtrl', ['$scope','$http', 'BusinessSrv', 'Products', function($scope, $http, $location, BusinessSrv, Products) {

    Products.get()
        .success(function(data) {
            $scope.products = data;
        });

    BusinessSrv.getTotal()
        .success(function(data) {
            $scope.businessSales = data;
        });
}])

.directive( 'saleProd',  [
    function () {
        return {
            restrict: 'E',
            link: function (scope, element) {

            // Building the chart here

            }

HTML：

<sale-prod></sale-prod>

在指令中以这种方式注入服务是否合适？

现在我在两个$ scope中有两组数据。如何在指令中使用它们？

Answer 1

您可以将$rootScope注入您的指令：

angular.module('prodsChart', [])
    .directive( 'saleProd', ['$rootScope', function ($rootScope) {
    // your code here
}]);

然后在指令中的任何地方使用它。

Answer 2

您可以将服务注入指令并使用它在整个应用程序中传输数据或使用$emit。

不太优雅的解决方案是使用.value()并在应用程序的任何位置处理它。

Answer 3

在第1和第2示例中，指令位于控制器的范围内，控制器的数据集作为属性传输到指令。在第一个示例中，指令可以修改控制器的数据。在第二个示例指令中，将控制器数据用作字符串并创建2个对象＆quot; productsObj＆＃39;和＆＃39; salesObj＆＃39;并且无法修改父母的范围。这取决于您如何处理指令中的属性以及如何将它们传输到指令中。只需点击产品列表（指令）＆＃39;中的项目即可。部分，你会看到结果。

第一名：http://plnkr.co/edit/v46oEGHvUnxMNYsKAeaW?p=preview

var directive = function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directive-template.html',
        scope: {
            products: '=',
            sales: '='
        }
    };
};

HTML：

<div ng-controller="BusinessController as BusinessCtrl">
    <sale-prod products="BusinessCtrl.products" sales="BusinessCtrl.sales"></sale-prod>
</div>

第二名：http://plnkr.co/edit/7CyIsqBNLbeZjyfbkGo9?p=preview

var directive = function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directive-template.html',
        scope: {
            products: '@',
            sales: '@'
        },
        link: function(scope, element, attrs) {
            attrs.$observe('products', function(newVal) {
                scope.productsObj = angular.fromJson(newVal);
            });

            attrs.$observe('sales', function(newVal) {
                scope.salesObj = angular.fromJson(newVal);
            });
        }
    };
};

HTML：

<div ng-controller="BusinessController as BusinessCtrl">
    <sale-prod products="{{BusinessCtrl.products}}" sales="{{BusinessCtrl.sales}}"></sale-prod>
</div>

第三个例子只是一段代码，展示了如何在指令和控制器中注入服务。我添加它是因为在你的例子中我没有看到指令中的服务注入：

(function(undefined) {
    var app = angular.module('prodsChart', []);

    var controller = function($scope, Business, Products) {
        // controller logic
    };

    var directive = function(Business) {
        return {
            restrict: 'E',
            link: function(scope, element, attrs) {
                // here you can use all Business service logic
            }
        };
    };

    var serviceBusiness = function() {
        // business service logic
    };

    var serviceProducts = function() {
        // products service logic
    };

    app.controller('BusinessController', ['$scope', 'Business', 'Products', controller])
        .directive('saleProd', ['Business', directive])
        .service('Business', serviceBusiness)
        .service('Products', serviceProducts);
})();

HTML：

<div ng-controller="BusinessController as BusinessCtrl"></div>
<sale-prod></sale-prod>

如何处理Angular指令中的多个范围？

3 个答案: