Question

我创造了这个plunker http://plnkr.co/tVMVGdbPtJ05wR2WPwbi

这个想法是可以使用指令从每个控制器创建用户列表。

app.directive('userHtml', function() {
    return {
        scope: {
            user: '=',
        },
        restrict: 'A',
        templateUrl: 'user.html'
    }
});

和模板

<span>ID: {{ user.id }}</span>
<span><a href="#" onclick="StatsCtrl.viewData()" data-id="{{user.id}}">Name: {{ user.name }}</a></span>

在指令模板中，我想显示更多用户数据。所以我为这个

创建了一个控制器

app.controller('StatsCtrl', ['$scope', function($scope) {

  $scope.data = '';

  $scope.viewData = function() {
    $scope.data = 'Hello World';
  }

}])

所以我在指令中创建了我的链接onclick="StatsCtrl.showPlayer()"，但我刚刚得到＆＃34; StatsCtrl未定义＆＃34;

这样做的正确方法是什么？

Answer 1

如何指定使用StatsCtrl作为指令的控制器？

我有更好的主意!!!

您可以将控制器对象传递给您的指令，以便您的指令可以始终在数据范围内的任何位置获取此数据。

说，

您想要使用指令中所有用户的详细信息。您可以直接将此对象传递给指令。

<my-directive user-data="myScopeVariable"> </my-directive>

此处，变量myScopeVariable是现有控制器的变量，它包含所有用户的详细信息。

myApp.Controller('myController', function($scope){
    $scope.myScopeVariable = []; // may be a list of user details
});

你的指令应该是这样的，

myApp.directive('myDirective', function(){
    return {
        scope : {
           userData : '=' // here you are specifying that you have an attribute with name 'user-data' and convert it's value to my directive's scope as $scope.userData
        },
        restrict: 'AE',
        templateUrl: 'user.html',
        link : function (scope, element, attrs){
             // this is your directive's controller
             // Here you can get user details as
             scope.userData;

             scope.ViewData = function(){
                 // This is your custom function
             }
        }
    }
});

因此，现在您可以使用userData作为用户详细信息的列表或对象，

<span>ID: {{ userData.user.id }}</span>
<span><a href="#" onclick="viewData()" data-id="{{userData.user.id}}">Name: {{ userData.user.name }}</a></span>

希望这会对你有所帮助。

Answer 2

如果我理解正确，指令需要访问控制器上的数据吗？然后将这些数据放在一个服务上，一个服务是一个单例，你可以将它注入控制器和指令中，然后两者都可以访问该数据。

你现在这样做的方式在几个方面是错误的。如果不使用'controller as'语法，就无法像这样调用控制器，并且您不能也不希望依赖父子范围继承来获取数据。

Answer 3

更改user.html：

<span>ID: {{ user.id }}</span>
<span><a href="#" onclick="StatsCtrl.viewData()" data-id="{{user.id}}">Name: {{ user.name }}</a></span>

要：

<div ng-controller="StatsCtrl">
<span>ID: {{ user.id }}</span>
<span><a href="#" ng-click="viewData()" data-id="{{user.id}}">Name: {{ user.name }} {{data}}</a></span>
</div>

在视图中调用另一个控制器 - Angular

3 个答案: