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

这应该导致指令获取父作用域并使其可访问数据。

将空对象传递给作用域会为指令创建一个独立的作用域。

AngularJS指令不显示模板

2 个答案: