Question

我试图在一个页面中多次使用相同的指令，我知道我需要制作孤立的范围，但我没有设法做到这一点。有人可以给我一些提示吗？

这是我的HTML：

    <!DOCTYPE html>
<html lang="en" ng-app="ui.instagram">

<head>
    <base href="/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Libs -->
    <script src="js/custom/jquery-2.1.1.js"></script>
    <!-- version 1.2.19 -->
    <script src="js/custom/angular.min.js"></script>

    <!--Custom Directives-->
    <script src="js/custom/ui-instagram.js"></script>

</head>

<body>
    <div ui-instagram user-id='xxxxx' client-id="xxxxxx"></div>
    <img ng-repeat="gram in grams" ng-attr-src="{{ gram.images.standard_resolution.url }}"></img>

    <div ui-instagram user-id='xxxxx' client-id="xxxxxx"></div>
    <img ng-repeat="gram in grams" ng-attr-src="{{ gram.images.standard_resolution.url }}"></img>

</body>

</html>

这是指令代码：

(function () {
    angular.module('ui.instagram', []).service('Instagram', function ($http) {
        return {
            get: function (id, clientId, cb) {
                var URL;
                URL = "https://api.instagram.com/v1/users/" + id + "/media/recent/?client_id=" + clientId + "&callback=JSON_CALLBACK";
                return $http.jsonp(URL).success(function (resolution) {
                    return cb(resolution.data);
                });
            }
        };
    }).directive('uiInstagram', function () {
        return {
            restrict: 'EA',
            scope: {
                userId: '@userId',
                clientId: '@clientId'
            },
            controller: function ($scope, $attrs, Instagram) {
                $scope.grams = [];
                return Instagram.get($attrs.userId, $attrs.clientId, function (grams) {
                    return $scope.grams = grams;
                });
            }
        };
    });

}).call(this);

Answer 1

我会将指令的责任提升一级，并使其负责渲染图像，而不是让控制器视图执行此操作：

将您的指令更改为：

.directive('uiInstagram', function (Instagram) {
        return {
            restrict: 'EA',
            scope: {
                userId: '=',
                clientId: '='
            },           
            templateUrl:'instagramTpl.html'
            link: function (scope,element, attrs) {
                scope.grams = [];
                Instagram.get(scope.userId, scope.clientId, function (grams) {
                    scope.grams = grams;
                });
            }
        };
    });

instagramTpl.html：

 <img ng-repeat="gram in grams" ng-src="{{ gram.images.standard_resolution.url }}"></img>

将您的服务更改为：

 return {
            get: function (id, clientId, cb) {
                var URL;
                URL = "https://api.instagram.com/v1/users/" + id + "/media/recent/?client_id=" + clientId + "&callback=JSON_CALLBACK";
                $http.jsonp(URL).success(function (resolution) {
                     cb(resolution.data);
                });
            }
        };

视图中的用法：

<div ng-repeat="user in users">
 <div ui-instagram user-id='user.id' client-id="user.clientId//or whatever"></div>
</div>

在同一页面上使用多个指令

1 个答案: