Question

我试图以更多的网络组件风格使用Angular。所以我创建了一个具有url和response属性的http-request指令。它工作得很好，但我的指令依赖于模板，我想删除它，因为它是hacky并且指令不需要模板。这是我的代码

<div>
  <http-request url="http://jsonplaceholder.typicode.com/posts" response="items"></http-request>
  <ul>
    <li ng-repeat="item in items">{{ item.id }}</li>
  </ul>
</div>

var myApp = angular.module('myApp', []);

myApp.directive('httpRequest', ['$http', function ($http) {
return {
    restrict: 'E',
    replace: true,
    scope: {
        response: '='
    },
    template: '<input type="text" ng-model="response" style="display:none"/>',
    link: function (scope, element, attributes) {
        $http.get(attributes.url)
            .then(function (response) {
            scope.response = response.data;
        });
    }
}
}]);

小提琴：http://jsfiddle.net/HB7LU/9558/

Answer 1

将您的指令更新为以下内容：

myApp.directive('httpRequest', ['$http', function ($http) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            response: '='
        },
        link: function (scope, element, attributes) {
            //create response object if it doesn't exist
            scope.response = scope.response || {};
            $http.get(attributes.url)
                .then(function (response) {
                //write to items property of response object
                scope.response.items = response.data;
            });
        }
    }
}]);

然后遍历您使用指令的response.items：

<http-request url="http://jsonplaceholder.typicode.com/posts" response="response">
</http-request>
<ul>
    <li ng-repeat="item in response.items">{{ item.id }}</li>
</ul>

更新了fiddle。

你这样做的方式（使用指令中的模板）将隔离范围内的引用重新分配为$ http数据。然后将其绑定到ng-model="response"（通过监视）并通过双向绑定发布回来。您还使用旧版角度。较新的版本看起来你不需要做这个工作，只需删除模板。

Newer angular fiddle

修改：

既然你说你不喜欢绑定到item属性。您可以将指令更改为这样（使用$ parse service设置范围上的值）。这也适用于旧版角度曲线：

myApp.directive('httpRequest', ['$http', '$parse', function ($http, $parse) { return { restrict: 'E', replace: true, link: function (scope, element, attributes) { //use $parse to assign this value to scope var responseSetter = $parse(attributes.response).assign; $http.get(attributes.url) .then(function (response) { //call the "setter" against scope with the data responseSetter(scope, response.data); }); } } }]);

Demo

Answer 2

您的指令不必具有模板，因为您无需在视觉上呈现任何内容。您所做的只是设置范围变量以封装请求的状态，然后对响应状态和数据做出反应。

在我帮助运行的最近的JS聚会上看一下https://github.com/coding-js/directives/tree/solutions/datasource。

指令依赖于模板工作

2 个答案: