javascript - 使用 JSON 创建一个简单的指令

Question

我正在创建一个简单的模式库，其中包含一个 HTML 模式的索引页面，以及每个模式的单独页面。

我在想我应该创建一个“模式”指令，其中包含索引页模式的模板。像这样:

<pattern></pattern>

这将显示:

<section ng-repeat="pattern in patterns | orderBy:'title'" class="pattern-type" data-anchor="{{pattern.anchor}}" id="{{pattern.id}}">
    <h3>{{pattern.title}} <a href="individuals/{{pattern.anchor}}">individuals/{{pattern.anchor}}</a></h3>
    <div class="pattern-desc" ng-show="pattern.description">
        <p>{{pattern.description}}</p>
    </div>
    <div class="pattern" ng-include="'individuals/' + {{pattern.anchor}}"></div>
    <div class="pattern-status">
        Date Posted: <span class="date"> {{pattern.updated | date:'yyyy-MM-dd'}}</span>
    </div>
</section>

我会为单独的模式显示模板创建一个单独的“单独”指令。我的 app.js 看起来像这样:

app.directive('pattern', function() {
    return {
        restrict: 'E', 
        templateUrl: 'pattern.html',
        controller: function() {
            $http.get('assets/js/components.json')
                .then(function(result) {
                    $scope.patterns = result.data;
                });
        },
        controllerAs: 'patterns'
    };
});

我的 JSON 看起来像这样:

[{
    "id": "alerts", 
    "anchor": "alerts", 
    "title": "Alerts", 
    "description": "This is a desc", 
    "guidelines": "", 
    "updated": "2015-06-26"
},
{
    "id": "buttons", 
    "anchor": "buttons", 
    "title": "Buttons", 
    "description": "", 
    "guidelines": "", 
    "updated": "2015-04-15"
}]

但是什么也没有出现。我错过了什么？

Answer 1

您的指令 Controller 在其函数中缺少 $http 和 $scope 依赖项。

代码

    controller: function($scope, $http) { //<-- added dependency here
        $http.get('assets/js/components.json')
            .then(function(result) {
                $scope.patterns = result.data;
        });
    },

Working Plunkr