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

您的指令控制器缺少git remote -v＆amp; <{1}}依赖于其功能。

<强>代码

$http

Working Plunkr

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

1 个答案: