AngularJS指令不顯示模板

Question

我的角度指令有一些問題。 此應用程序的預期結果是使用角度指令和html模板從主控制器中的數組顯示Personal Trainer配置文件。 我似乎無法弄清楚為什么這不起作用，下面復制了代碼片段。 控制台顯示沒有錯誤，我可以手動解析培訓師陣列的數據綁定，但我希望模板顯示這個...

HTML：

...
<div ng-controller="MainController">
    <div ng-repeat="trainer in trainers">
      <app-info></app-info>
    </div>
</div>
...

MainController.js：

angular.module('reasons', []).controller('MainController', ['$scope', function($scope) {
    $scope.trainers = [ 
        { 
            name: 'Mike',
            email: 'mike@gym.com',
            tel: '07191941249',
            info: 'I am a gym instructor',
            quote: 'Inspirational Quote'
        }, ... ]
}]);

app-info指令：

app.directive('appInfo', function() { 
    return { 
        restrict: 'E', 
        scope: {}, 
        templateUrl: 'js/directives/appInfo.html' 
    }; 
});

app-info指令模板：

<div>
<h3>{{trainer.name}}</h3>
<p>{{trainer.tel}}</p>
<p>{{trainer.email}}</p>
</div>

我該如何解決這個問題？

編輯 - 所以我完整地添加了代碼[並刪除了不相關的部分]。 在我的項目中，我實際上是在嘗試鏈接模板html文檔，但即使只是使用'template：'也不起作用？

Answer 1

我設法解決了這個問題（某種程度上）！

我更改了控制器代碼來說app.controller而不是使用angular.module來定義應用程序。 出於某種原因，以前這種方法不起作用，現在可以工作，我現在正在努力將它成功地整合到我的實際項目中。

app.controller('MainController', ['$scope', function($scope) {
$scope.trainers = [ 
    { 
        name: 'Mike',
        email: 'mike@gym.com',
        tel: '07191941249',
        info: 'I am a gym instructor',
        quote: 'Inspirational Quote'
    }, ... ]
}]);

Answer 2

嘗試將指令更改為：

app.directive('appInfo', function() { 
return { 
    restrict: 'E', 
    scope: false, 
    templateUrl: 'js/directives/appInfo.html' 
}; 
});

這應該導致指令獲取父作用域並使其可訪問數據。

將空對象傳遞給作用域會為指令創建一個隔離的作用域。