Angularjs:在指令内创建新的范围属性

Angularjs:在指令内创建新的范围属性,angularjs,angularjs-directive,Angularjs,Angularjs Directive,这个值从未在DOM上显示,我只是想看看这种方法是否有效 我试图做的是在指令内创建一个新的范围值,并将其显示给DOM app.directive("rest", ["restFactory", function($rest){ return { restrict: "A", scope: { uri: "@rest", }, link: function(scope){ scop

这个值从未在DOM上显示,我只是想看看这种方法是否有效

我试图做的是在指令内创建一个新的范围值,并将其显示给DOM

app.directive("rest", ["restFactory", function($rest){
    return {
        restrict: "A",
        scope: {
            uri: "@rest",
        },
        link: function(scope){
            scope.$rest = [];

            $rest.batch(scope.uri)
                .then(function(data){
                    scope.$rest = data;
                });
        }
    }
}]);
我试图显示的数据来自一个函数,该函数返回一个promise,随着promise的出现,我希望在DOM中使用的数据也随之出现

HTML的编码如下所示:

<div rest="accounts">
    <div ng-repeat="data in $rest">
        {{data.id}}
    </div>
</div>
app.factory('myFactory', function($http) {

    // GET example
    this.get = function(string) {
        return $http({
            method: 'GET',
            url: 'https://api.github.com/search/repositories?q=' + string
        });
    }

    // Your request here
    this.yourRequest = function(uri) {
        // return $rest.batch(uri);
    }

    return this;
});

{{data.id}
这是我做的第一个指令。

我解释了为什么你的指令不起作用

<div rest="accounts">
    <!-- You can't access the directive variable $rest from here 
         The directives variables are only available on it's template. -->
    <div ng-repeat="data in $rest">
        {{data.id}}
    </div>
</div>
在控制器中:

app.controller('MainCtrl', function($scope, myFactory) {
    $scope.myData = [];


    myFactory.get('tetris').then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.myData = response.data.items;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

});
视图:

视图:


{{data.id}

谢谢你的解释,我会把这些都保存在mind@nosthertus我忘了保存plunker的最后一个版本。现在它被更新了
app.controller('MainCtrl', function($scope, myFactory) {
    $scope.myData = [];


    myFactory.get('tetris').then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.myData = response.data.items;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

});
<div ng-repeat="data in myData">
    {{data.id}}
</div>
app.directive("restThree", function() {
    return {
        restrict: "A",
        scope: {
            'data': '='
        },
        link: function(scope, el, attr) {
            //console.log(attr.rest); // output = accounts

            //data
            scope.$rest = [{
                'id': 1,
                'name': 'John Doe'
            }, {
                'id': 2,
                'name': 'Johana Doe'
            }];

            scope.data = scope.$rest;
        }
    }
});
<div rest-three="accounts" data="directiveData">
    <div ng-repeat="data in directiveData">
        {{data.id}}
    </div>
</div>