Question

我有一个指令：

<users-table user="{{ session.user }}"></users-table>

session.user是一个包含多个键值对的对象。

我有一个指令：

angular.module('app')
.directive('users-table', function($scope) {
    return {
        restrict: "E",
        scope: {
            currentUser: "=user"
        },
        templateUrl: '/js/directives/templates/users-table.html',
        link: function($scope, $element, $attrs) {
            console.log(currentUser);
            $scope.user = currentUser;
        } // link
    }; // return
}]);

在这个阶段，我只是通过在模板中输出$scope.user对象来确认它是否正确连线：

/js/directives/templates/users-table.html：

{{ user }}

但这并不能归还任何东西。我在这个简单的指令中做错了什么？

调试步骤我已经完成了：

检查文件是否已正确加载。
检查session.user的输出（这在指令元素之前是正确的。）

编辑：似乎链接功能甚至没有被调用，因为currentUser没有被记录到控制台。

Answer 1

正确的作业是：

<users-table user="session.user"></users-table>

{{ session.user }}将采用单一方式绑定：currentUser: "@user"

另外，如前所述，作业应该是：

    $scope.user = $scope.currentUser;

最后，该指令应声明为：

.directive('usersTable'

这是因为指令需要声明中的camel case值和html中的dash划分属性

这是一个有效的jsfiddle：

http://jsfiddle.net/wkvmt5m7/2/

Answer 2

您尚未在currentUser函数中的任何位置定义link。因此它作为未定义（和未声明的）变量而存在。

如您所做的那样创建隔离范围预先填充链接函数内的范围，以从父范围连接或复制（或其他）。所以你真的需要这样做：

    link: function($scope, $element, $attrs, User) {
        console.log($scope.currentUser);
        $scope.user = $scope.currentUser;
    }

隔离范围

scope: {
   currentUser: '=user'
}

将您的链接功能中的scope.currentUser设置为来自父级的scope.user。

将变量分配给$ scope inside指令

2 个答案: