javascript - 根据对象值定义具有隔离范围的自定义指令

Question

我的 Controller 中有人员类型的对象列表，当我循环它们时，它工作正常并显示列表中所有人员的姓名。我已经定义了一个 Controller 来以结构化方式显示数据，但它不允许将自定义指令的范围绑定(bind)到人名的值这件作品很好

   <div ng-app="myapp">
                    <div ng-controller="MyController">
                    <div ng-repeat="per in person">
                        <!-- <test user=" -->
                        {{per.firstName}}
                        <!-- "></test> -->
                    </div>

但是当我尝试将自定义指令的范围绑定(bind)到对象名字时，AngularJS 抛出错误

错误:[$parse:syntax] 语法错误:从 [{per.firstName}}] 开始的表达式 [{{per.firstName}}] 第 2 列中的标记“{”键无效。

<div ng-repeat="per in person">
                    <test user=" {{per.firstName}}"></test>
                </div>
                </div>

          </div>

AngularJs 条件:

var myapp=angular.module('myapp',[]);
myapp.controller('MyController',function($scope){
    $scope.person=[
    {firstName:"ali1",
    lastName:"ahmad"
    },
    {firstName:"ali2",
    lastName:"ahmad3"
    },
    {firstName:"ali4",
    lastName:"ahmad"
    },
    {firstName:"ali5",
    lastName:"ahmad"
    },
    ];
});



myapp.directive('test',function(){
    var directive={}
    directive.restrict="E";
    directive.template="Name : {{user.firstName}}";
    directive.scope={
        user:"=user"
    }
    return directive;

});

如何将自定义指令与对象指令的值绑定(bind)。？

Answer 1

试试这个:

<test user="per"></test>

html:

myapp.directive('test', function () {
    return {
        restrict: 'E',
        scope: {
            user: '='
        },
        template: 'Name : {{user.firstName}}'
    };
});