blocks|key|161096|text|正如您所说，您不需要请求该文件两次。把它从你的控制器传递给你的指令。假设您在控制器的作用域内使用该指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161097|.controller('MyController',+['$scope',+'$http',+function($scope,+$http)+{
++$http.get('locations/locations.json').success(function(data)+{
++++++$scope.locations+=+data;
++});
}|code-block|syntax|javascript|161098|然后在HTML中(在其中调用指令)。|161099|注意：locations是对控制器$scope.locations的引用。|offset|length|style|CODE|161100|<div+my-directive+location-data="locations"></div>|161101|最后在你的指令中|161102|...
scope:+{
++locationData:+'=locationData'
},
controller:+['$scope',+function($scope){
++//+And+here+you+can+access+your+data
++$scope.locationData
}]
...|161103|这只是一个指导您正确方向的大纲，因此它是不完整的，也没有经过测试。|161104|entityMap^0|0|0|0|3|9|H|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]|$K|14|L|15|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

As you say, you don't need to request the file twice. Pass it from your controller to your directive. Assuming you use the directive inside the scope of the controller:

<pre><code>.controller('MyController', ['$scope', '$http', function($scope, $http) {
 $http.get('locations/locations.json').success(function(data) {
 $scope.locations = data;
 });
}
</code></pre>

Then in your HTML (where you call upon the directive). 
Note: <code>locations</code> is a reference to your controllers <code>$scope.locations</code>.

<pre><code>&lt;div my-directive location-data="locations"&gt;&lt;/div&gt;
</code></pre>

And finally in your directive

<pre><code>...
scope: {
 locationData: '=locationData'
},
controller: ['$scope', function($scope){
 // And here you can access your data
 $scope.locationData
}]
...
</code></pre>

This is just an outline to point you in the right direction, so it's incomplete and not tested.

blocks|key|162094|text|你需要的是一个合适的服务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162095|.factory('DataLayer',+['$http',

++++function($http)+{

++++++++var+factory+=+{};
++++++++var+locations;

++++++++factory.getLocations+=+function(success)+{
++++++++++++if(locations){
++++++++++++++++success(locations);
++++++++++++++++return;
++++++++++++}
++++++++++++$http.get('locations/locations.json').success(function(data)+{
++++++++++++++++locations+=+data;
++++++++++++++++success(locations);
++++++++++++});
++++++++};

++++++++return+factory;
++++}
]);|code-block|syntax|javascript|162096|locations将被缓存在服务中，该服务作为单例模型工作。这是获取数据的正确方式。|offset|length|style|CODE|162097|在你的控制器中使用这个服务DataLayer，指令是可以的，如下所示：|162098|appControllers.controller('dummyCtrl',+function+($scope,+DataLayer)+{
++++DataLayer.getLocations(function(data){
++++++++$scope.locations+=+data;
++++});
});

.directive('map',+function(DataLayer)+{
++++return+{
++++++++restrict:+'E',
++++++++replace:+true,
++++++++template:+'<div></div>',
++++++++link:+function(scope,+element,+attrs)+{

++++++++++++DataLayer.getLocations(function(data)+{
++++++++++++++++angular.forEach(data,+function(location,+key){
++++++++++++++++++++//do+something
++++++++++++++++});
++++++++++++});
++++++++}
++++};
});|162099|entityMap^0|0|0|0|9|0|D|9|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

What you need is properly a service:

<pre><code>.factory('DataLayer', ['$http',

 function($http) {

 var factory = {};
 var locations;

 factory.getLocations = function(success) {
 if(locations){
 success(locations);
 return;
 }
 $http.get('locations/locations.json').success(function(data) {
 locations = data;
 success(locations);
 });
 };

 return factory;
 }
]);
</code></pre>

The <code>locations</code> would be cached in the service which worked as singleton model. This is the right way to fetch data.

Use this service <code>DataLayer</code> in your controller and directive is ok as following:

<pre><code>appControllers.controller('dummyCtrl', function ($scope, DataLayer) {
 DataLayer.getLocations(function(data){
 $scope.locations = data;
 });
});

.directive('map', function(DataLayer) {
 return {
 restrict: 'E',
 replace: true,
 template: '&lt;div&gt;&lt;/div&gt;',
 link: function(scope, element, attrs) {

 DataLayer.getLocations(function(data) {
 angular.forEach(data, function(location, key){
 //do something
 });
 });
 }
 };
});
</code></pre>

blocks|key|161134|text|如果你想遵循所有的“最佳实践”，我会推荐一些东西，其中一些在这个问题的其他答案和评论中涉及到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161135|161136|首先，虽然它对您提出的特定问题没有太大影响，但您确实提到了效率，并且在应用程序中处理共享数据的最佳方法是将其分解到服务中。|161137|我个人推荐使用AngularJS的promise+system，与原始回调相比，它将使您的异步服务更具可组合性。幸运的是，Angular的$http服务已经在幕后使用它们。下面的服务将返回解析来自JSON文件的数据的承诺；多次调用该服务不会导致第二个HTTP请求。|offset|length|style|CODE|161138|app.factory('locations',+function($http)+{
++var+promise+=+null;

++return+function()+{
++++if+(promise)+{
++++++//+If+we've+already+asked+for+this+data+once,
++++++//+return+the+promise+that+already+exists.
++++++return+promise;
++++}+else+{
++++++promise+=+$http.get('locations/locations.json');
++++++return+promise;
++++}
++};
});|code-block|syntax|javascript|161139|161140|就将数据放入指令而言，重要的是要记住，指令是为抽象通用DOM操作而设计的；您不应该向它们注入特定于应用程序的服务。在这种情况下，很容易简单地将locations服务注入到指令中，但这会将指令耦合到该服务。|161141|161142|关于代码模块化的简要说明:指令的函数几乎不应该负责获取或格式化自己的数据。没有什么可以阻止您从指令中使用$http服务，但这几乎总是错误的做法。编写一个使用$http的控制器是正确的方法。指令已经触及了DOM元素，这是一个非常复杂的对象，很难将其存根出来进行测试。将网络I/O添加到混合中会使您的代码更难理解，也更难测试。此外，网络I/O锁定了您的指令获取数据的方式--在其他地方，您可能希望让此指令从套接字接收数据或接收预加载的数据。您的指令应该通过scope.$eval将数据作为属性接受，并且/或者使用一个控制器来处理获取和存储data.|blockquote|161143|The+80/20+Guide+to+Writing+AngularJS+Directives|unordered-list-item|161144|161145|161146|在这种特定情况下，您应该将适当的数据放在控制器的作用域上，并通过属性与指令共享它。|161147|app.controller('SomeController',+function($scope,+locations)+{
++locations().success(function(data)+{
++++$scope.locations+=+data;
++});
});|161148|<ul+class="list">
+++<li+ng-repeat="location+in+locations">
++++++<a+href="#">{{location.id}}.+{{location.name}}</a>
+++</li>
</ul>
<map+locations='locations'></map>|161149|app.directive('map',+function()+{
++return+{
++++restrict:+'E',
++++replace:+true,
++++template:+'<div></div>',
++++scope:+{
++++++//+creates+a+scope+variable+in+your+directive
++++++//+called+`locations`+bound+to+whatever+was+passed
++++++//+in+via+the+`locations`+attribute+in+the+DOM
++++++locations:+'=locations'
++++},
++++link:+function(scope,+element,+attrs)+{
++++++scope.$watch('locations',+function(locations)+{
++++++++angular.forEach(locations,+function(location,+key)+{
++++++++++//+do+something
++++++++});
++++++});
++++}
++};
});|161150|通过这种方式，map指令可以与任何一组位置数据一起使用--该指令并不是硬编码为使用一组特定的数据，只是通过在DOM中包含它来链接该指令并不会触发随机的HTTP请求。|161151|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.$q|1|http://thecodebarbarian.wordpress.com/2013/09/23/the-8020-guide-to-writing-angularjs-directives/^0|0|0|0|1X|5|H|E|0|0|0|0|1Z|9|0|0|0|0|1B|1|0|0|0|0|0|0|0|7|3|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|1N|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1O|8|@$G|1P|H|1Q|I|J]]|9|@$G|1R|H|1S|1|1T]]|A|$]]|$1|K|3|L|5|M|7|1U|8|@]|9|@]|A|$N|O]]|$1|P|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1W|8|@$G|1X|H|1Y|I|J]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|20|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|21|8|@]|9|@$G|22|H|23|1|24]]|A|$]]|$1|Z|3|-4|5|6|7|25|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|27|8|@]|9|@]|A|$]]|$1|13|3|14|5|M|7|28|8|@]|9|@]|A|$N|O]]|$1|15|3|16|5|M|7|29|8|@]|9|@]|A|$N|O]]|$1|17|3|18|5|M|7|2A|8|@]|9|@]|A|$N|O]]|$1|19|3|1A|5|6|7|2B|8|@$G|2C|H|2D|I|J]]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]|1J|$5|1E|1F|1G|A|$1H|1K]]]]

If you want to follow all the "best practices," there's a few things I'd recommend, some of which are touched on in other answers and comments to this question.

<hr>

First, while it doesn't have too much of an affect on the specific question you asked, you did mention efficiency, and the best way to handle shared data in your application is to factor it out into a service.

I would personally recommend embracing AngularJS's <a href="http://docs.angularjs.org/api/ng.$q" rel="noreferrer">promise system</a>, which will make your asynchronous services more composable compared to raw callbacks. Luckily, Angular's <code>$http</code> service already uses them under the hood. Here's a service that will return a promise that resolves to the data from the JSON file; calling the service more than once will not cause a second HTTP request.

<pre class="lang-javascript prettyprint-override"><code>app.factory('locations', function($http) {
 var promise = null;

 return function() {
 if (promise) {
 // If we've already asked for this data once,
 // return the promise that already exists.
 return promise;
 } else {
 promise = $http.get('locations/locations.json');
 return promise;
 }
 };
});
</code></pre>

<hr>

As far as getting the data into your directive, it's important to remember that directives are designed to abstract generic DOM manipulation; you should not inject them with application-specific services. In this case, it would be tempting to simply inject the <code>locations</code> service into the directive, but this couples the directive to that service.

<blockquote>
 A brief aside on code modularity: a directive’s functions should almost never be responsible for getting or formatting their own data. There’s nothing to stop you from using the $http service from within a directive, but this is almost always the wrong thing to do. Writing a controller to use $http is the right way to do it. A directive already touches a DOM element, which is a very complex object and is difficult to stub out for testing. Adding network I/O to the mix makes your code that much more difficult to understand and that much more difficult to test. In addition, network I/O locks in the way that your directive will get its data – maybe in some other place you’ll want to have this directive receive data from a socket or take in preloaded data. Your directive should either take data in as an attribute through scope.$eval and/or have a controller to handle acquiring and storing the data.
 
 - <a href="http://thecodebarbarian.wordpress.com/2013/09/23/the-8020-guide-to-writing-angularjs-directives/" rel="noreferrer">The 80/20 Guide to Writing AngularJS Directives</a>
</blockquote>

In this specific case, you should place the appropriate data on your controller's scope and share it with the directive via an attribute.

<pre class="lang-javascript prettyprint-override"><code>app.controller('SomeController', function($scope, locations) {
 locations().success(function(data) {
 $scope.locations = data;
 });
});
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;ul class="list"&gt;
 &lt;li ng-repeat="location in locations"&gt;
 &lt;a href="#"&gt;{{location.id}}. {{location.name}}&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;map locations='locations'&gt;&lt;/map&gt;
</code></pre>

<pre class="lang-javascript prettyprint-override"><code>app.directive('map', function() {
 return {
 restrict: 'E',
 replace: true,
 template: '&lt;div&gt;&lt;/div&gt;',
 scope: {
 // creates a scope variable in your directive
 // called `locations` bound to whatever was passed
 // in via the `locations` attribute in the DOM
 locations: '=locations'
 },
 link: function(scope, element, attrs) {
 scope.$watch('locations', function(locations) {
 angular.forEach(locations, function(location, key) {
 // do something
 });
 });
 }
 };
});
</code></pre>

In this way, the <code>map</code> directive can be used with any set of location data--the directive is not hard-coded to use a specific set of data, and simply linking the directive by including it in the DOM will not fire off random HTTP requests.

Currently, my app has a controller that takes in a JSON file then iterates through them using "ng-repeat". This is all working great, but I also have a directive that needs to iterate through the same JSON file. This is posing a problem as I cannot request the same JSON file twice on one page (nor would I want to because it would be inefficient). Both the directive and controller request and iterate through the JSON data just fine if I change the filename of one of the JSON files.

What I'm wondering is: what's the best way to go about passing the array formed from my controller's JSON request into the directive? How can I pass the array into my directive and iterate through when I've already accessed it via my controller?

Controller

<pre><code>appControllers.controller('dummyCtrl', function ($scope, $http) {
 $http.get('locations/locations.json').success(function(data) {
 $scope.locations = data;
 });
});
</code></pre>

HTML

<pre><code>&lt;ul class="list"&gt;
 &lt;li ng-repeat="location in locations"&gt;
 &lt;a href="#"&gt;{{location.id}}. {{location.name}}&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;map&gt;&lt;/map&gt; //executes a js library
</code></pre>

Directive (Works when I use a file name besides locations.json, since I've already requested it once

<pre><code>.directive('map', function($http) {
 return {
 restrict: 'E',
 replace: true,
 template: '&lt;div&gt;&lt;/div&gt;',
 link: function(scope, element, attrs) {

$http.get('locations/locations.json').success(function(data) {
 angular.forEach(data.locations, function(location, key){
 //do something
 });
});
</code></pre>

In Angular, how to pass JSON object/array into directive?

JSON

目前，我的应用程序有一个控制器，它接受一个JSON文件，然后使用"ng-repeat“遍历它们。这一切都很好用，但是我还有一个指令需要遍历相同的JSON文件。这带来了一个问题，因为我不能在一个页面上请求相同的JSON文件两次(我也不想这样做，因为这样效率会很低)。如果我更改了其中一个JSON文件的文件名，那么指令和控制...

问在Angular中，如何将JSON对象/数组传入指令？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular中，如何将JSON对象/数组传入指令？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular中，如何将JSON对象/数组传入指令？
EN