Question

我想操纵发送到我的指令的数据，即。我有一个显示用户名的myUser指令，用法如下：

<my-user id="25" name="John Doe"></my-user>

我希望将其转换为：

<a ng-click="navTo('/user/25')">John&nbsp;Doe</a>

所以我想用 替换任何空格，并根据用户的id设置新位置。这是我的指令定义：

angular.module('myApp').directive('myUser', function ($location, $log) {
    return {
        restrict: 'EA',
        scope: {
            id: '@',
            name: '@'
        },
        template: '<a ng-click="navTo(\'/users/\' + {{id}})">{{name}}</a>',
        controller: function ($scope) {
            $scope.name.replace(' ', '&nbsp;');
        },
        link: function (scope, element, attrs, fn) {
            scope.name.replace(' ', '&nbsp;');

            scope.navTo = function (route) {
                $log.info('Navigating to ' + route);
                $location.path(route);
            };

        }
    };
});

但是，替换不会发生。我假设在渲染模板后执行控制器和链接功能。

此外，navTo函数返回以下错误：

Error: [$parse:syntax] Syntax Error: Token 'id' is unexpected, expecting [:] at column 21 of the expression [navTo('/users/' + {{id}})] starting at [id}})].

如何解决这个问题的任何想法都将非常感激。

Answer 1

只需用下面的代码替换你的模板就可以了。

template: '<a ng-click=\'navTo("/users/{{id}}")\'>{{name}}</a>',

Answer 2

ng-click采用表达式并且不需要插值，因此您不需要使用{{}}。你可以删除它们，就像这样......

template: '<a ng-click="navTo(\'/users/\' + id)">{{name}}</a>'

Live Demo - Fiddle

如何操作隔离范围输入变量？

2 个答案: