用于href行为的angularJS指令

时间:2015-05-19 03:15:04

标签: angularjs angular-directive

我正在尝试将href行为添加到标记中。如何才能做到这一点? 在angular指令中是否有办法向其他html标记添加相同的行为。

我添加了

  <div click-element="#/page1/test?Tab=1/">

但是我将以下的词法分析错误传递给参数:

 "stack": "Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 0-0 [#] in expression [#/page1/test?Tab=1/].

如何将URL作为属性参数传递?

更新

我希望click-element指令成为处理导航的指令。该元素看起来像:

<div click-element="#/page1/test?Tab=1/">

在click-element指令中:

 function clickElement( $location) {

            var clickElementDefinition = {
                restrict: 'A',
                scope: {
                    clickElement: "="
                },
                link: clickElementMethod
            };
            return clickElementDefinition ;

            function clickElementMethod(scope, element, attrs) {
                element.bind('click', function (event) {
                        if (scope.clickElement) {
                        var arr = scope.clickElement.split("?");
                        var queryParam = arr[1].split("=") || "";
                        $location.path(arr[0]).search(queryParam[0], queryParam[1]);
                    }
                });
            }
        };

我仍然在指令加载时遇到词法分析器错误。

1 个答案:

答案 0 :(得分:2)

您需要向click-element添加第二组引号或使用attrs.clickElement而不是scope。

<div click-element="'#/page1/test?Tab=1/'">

function clickElementMethod(scope, element, attrs) {
            element.bind('click', function (event) {
                    if (attrs.clickElement) {
                    var arr = attrs.clickElement.split("?");
                    var queryParam = arr[1].split("=") || "";
                    $location.path(arr[0]).search(queryParam[0], queryParam[1]);
                }
            });
        }

scope: {
     clickElement: "@"
},