使用JSON创建简单的指令

Question

I am creating a simple pattern library with an index page of HTML patterns, and individual pages for each pattern.

I am thinking that I should create a "pattern" directive that would include the template for the index page patterns. Like this:

<pattern></pattern>

which would show:

<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>

I would create a separate "individual" directive for the individual pattern display template. My app.js look like this:

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'
    };
});

And my JSON looks like this:

[{
    "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"
}]

However nothing is showing up. What am I missing?

Answer 1

Your directive controller has missing $http & $scope dependency inside its function.

Code

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

Working Plunkr