将JSON对象作为参数传递给指令的链接函数

Question

在一个指令（我们称它为basket ）中，我有一个本地可用的JSON对象（我们称其为fruit ）（即不需要$ http）。 水果 JSON对象非常复杂，并且每次都有动态数据。

该指令还动态生成一些具有各自指令的html元素（ apple和banana ），然后将这些新元素编译到页面中：

myApp.directive("basket", function($compile) {
    return {
      link: function(scope, element) {

        var html = '';

        var fruits = ['apple', 'banana'];
        for (var i = 0; i < fruits.length; i++) {
          var fruit = {
            name: fruits[i],
            /* ... plus many other complex properties/objects/arrays ... */
          };
          html += '<div ' + fruits[i] + '=""></div>';
        }

        // Compile element.
        var linkFn = $compile(html);
        var content = linkFn(scope);
        element.append(content);

      }
    };
});

产生的html看起来像这样：

<div basket="">
  <div apple="">...</div>
  <div banana="">...</div>
</div>

如何获得将水果 JSON对象作为参数传递给apple和banana指令链接功能的方法？

例如，我希望能够做到这一点：

myApp.directive("apple", function($compile) {
    return {
      link: function(scope, element, fruit) {

        // Build some custom html about an apple...
        var html = fruit.name;
        html += other_apple_related_stuff(fruit);

        // Compile element.
        var linkFn = $compile(html);
        var content = linkFn($scope);
        $element.append(content);

      }
    };
});

myApp.directive("banana", function($compile) {
    return {
      link: function(scope, element, fruit) {

        // Build some custom html about an banana...
        var html = fruit.name;
        html += other_banana_related_stuff(fruit);

        // Compile element.
        var linkFn = $compile(html);
        var content = linkFn($scope);
        $element.append(content);

      }
    };
});

尽管apple和banana指令相似，但是它们足够不同，以至于我想将它们的实现跨多个文件分开。

我知道我可以将水果 JSON对象放在$ scope中 ，然后稍后在apple和banana指令中将其拉出。

但我真的很想将这个大型水果 JSON对象作为参数传递到每个指令的链接函数中。

解决了

感谢@AWolf的演示代码，我能够分叉代码并获得所需的输出： https ://jsfiddle.net/tyler_frankenstein/7cyLgscj/2/

Answer 1

如果我了解它的正确性。 您可以使用服务并将其注入每个指令中。 然后，您可以在每个指令中使用相同的JSON。

请看下面和这个小提琴中的演示。

 angular.module('myApp', []) .factory('fruitService', fruits) .directive('basket', basket) .directive('banana', banana) .directive('apple', apple); function basket($compile, fruitService) { var ddo = { restrict: 'E', link: function (scope, element, attrs) { var html = ''; var fruits = ['apple', 'banana']; for (var i = 0; i < fruits.length; i++) { var fruit = { name: fruits[i], /* ... plus many other complex properties/objects/arrays ... */ }; fruitService.pushFruits(fruit); html += '<div ' + fruits[i] + '=""></div>'; } // Compile element. var linkFn = $compile(html); var content = linkFn(scope); element.append(content); } }; return ddo; } basket.$inject = ['$compile', 'fruitService']; function banana(fruitService) { return { template: '<p>banana</p><pre>{{fruits|json}}</pre>', link: function (scope, element, attrs) { console.log('banana', fruitService.getFruits()); scope.fruits = fruitService.getFruits(); } }; } banana.$inject = ['fruitService']; function apple(fruitService) { return { template: '<p>apple</p><pre>{{ctrl.fruits|json}}</pre>', controller: function ($scope) { // could be also the link method console.log('apple', fruitService.getFruits()); this.fruits = fruitService.getFruits(); }, controllerAs: 'ctrl' }; } apple.$inject = ['fruitService']; function fruits() { return { fruits: [], pushFruits: function (newFruits) { this.fruits.push(newFruits); }, getFruits: function () { return this.fruits; } }; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <basket></basket> </div>