Javascript 角度误差我不明白？

我正在尝试构建此处的菜单：

但是，当我将其实施到我的项目中时，我收到以下错误消息：

Syntax Error: Token 'node.click' is unexpected, expecting [:] at column 3 of the expression [{{node.click}}] starting at [node.click}}].

我得到的结果是我可以看到菜单项的名称，但是当我将鼠标悬停在它们上面时，我会收到一个空的菜单框

以下是我的2条HTML指令：

app.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) {
    return {
        restrict: 'C', //Element
        scope: true,
        link: function (scope, element, attrs) {
            scope.selectedNode = null;

            scope.$watch(attrs.menuData, function (val) {

                var template = angular.element('<ul id="parentTreeNavigation"><li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" >{{node.text}}</a><sub-navigation-tree></sub-navigation-tree></li></ul>');

                var linkFunction = $compile(template);
                linkFunction(scope);
                element.html(null).append(template);

            }, true);
        }
    };
}]);
app.directive('subNavigationTree', ['$compile', function ($compile) {
    return {
        restrict: 'E', //Element
        scope: true,
        link: function (scope, element, attrs) {
            scope.tree = scope.node;

            if (scope.tree.children && scope.tree.children.length) {
                var template = angular.element('<ul class="dropdown "><li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeId + '}}  ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-unsafe="node.text"></a><sub-navigation-tree tree="node"></sub-navigation-tree></li></ul>');

                var linkFunction = $compile(template);
                linkFunction(scope);
                element.replaceWith(template);
            } else {
                element.remove();
            }
        }
    };
}]);

app.controller('HeaderController', ['$scope', '$location', function ($scope, $location) { 
    $scope.breadcrumbs = [];
    $scope.menu = [{
        text: 'HOME',
        href: '/app/index.html',
        children: [{
            text: 'MANAGE Dashboard',
            href: '/dashb'
        }]
    }, {
        text: 'MANAGE',
        href: '/manage',
        children: [{
            text: 'MANAGE PEOPLE',
            href: '/manage-people',
            children: [{
                text: 'MANAGE STAFF',
                href: '/manage-staff'
            }, {
                text: 'MANAGE CLIENTS',
                href: '/manage-clients'
            }]
        }]
    }, {
        text: 'REPORTS',
        href: '/reports',
        children: [{
            text: 'REPORT NUMERO UNO',
            href: '#'
        }, {
            text: 'REP NUMERO 2',
            href: '#',
            children: [{
                text: 'Third Tier',
                href: '#'
            }, {
                text: 'Another Third Tier',
                href: '#',
                children: [{
                    text: 'SUB SUB NAV',
                    href: '#'
                }]
            }]
        }]
    }, {
        text: 'MY INFO',
        href: '/my-info'
    }, ]


}]);

<div class="row">
<div class="large-12 columns">

   <nav class="nav-menu" menu-data="menu"></nav>

</div>
</div>

app.directive（'navMenu'，['$parse'，'$compile'，函数（$parse，$compile）{
返回{
restrict:'C'，//元素
范围：正确，
链接：函数（范围、元素、属性）{
scope.selectedNode=null；
范围$watch（attrs.menuData，函数（val）{
var template=angular.element（'
”
/ul；
var linkFunction=$compile（模板）；
联系职能（范围）；
html（null）.append（模板）；
}，对）；
}
};
}]);
app.directive（'subNavigationTree'，['$compile'，function（$compile）{
返回{
restrict:'E'，//元素
范围：正确，
链接：函数（范围、元素、属性）{
scope.tree=scope.node；
if（scope.tree.children&&scope.tree.children.length）{
var template=angular.element（'

---

我通过在链接中添加一个{node.text}}修复了这个问题，因为那里没有任何东西，我没有想到检查它，因为它在小提琴上不知怎么工作。

问题是您使用的是

ng bind html unsafe

，它从Angular 1.2+开始就被弃用了，您应该将其替换为

ng bind html

，然后需要使用

$sce

服务使用

$sce.trustedAsHtml

方法清理该html

为此，您应该编写自定义过滤器，并在需要显示HTML的任何位置应用该过滤器

app.filter('unsafe', function($sce) { 
    return $sce.trustAsHtml; 
});

然后在html中，它将用作

ng bind html=“node.text | unsafe”

---

在我这方面它工作正常..意味着在menu@pankajparkar请参考我刚刚上传的附加图像EditEMS是空的，但我可以点击它们？但是在你的小提琴中，它正确地显示了它，我对指令上的把手有点困惑。像ng click或ng href这样的Afaik指令不需要这些把手。因此，如果在

节点上有单击功能，您可能应该尝试
ng click=“node.click（）”
。同样，使用{node.click}，您实际上不会在node click上执行任何操作。表达式将只在fiddle上运行，因为您使用的是1.1版本，其中
ng bind html unsafe
正在运行请查看min-answer了解详细信息Hanks mate，您能给我一个关于必须在指令中对html进行santize的快速总结吗？@elevat阅读这里，您将了解全部内容