Angular 错误我不明白?
Angular error i dont understand?
我正在尝试构建此处的菜单:
然而,当我将它实施到我的项目中时,我收到以下错误消息:
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>
我通过在 link 中添加一个 {{node.text}} 解决了这个问题,因为那里什么都没有我没想过要检查它,因为它在 [=13] 上以某种方式工作=].
问题是您使用的 ng-bind-html-unsafe
已从 Angular 1.2+ 中弃用,您应该将其替换为 ng-bind-html
然后您需要清理 html使用 $sce
服务使用 $sce.trustedAsHtml
方法。
为此,您应该编写自定义过滤器并在任何您想要显示的地方应用该过滤器 HTML
app.filter('unsafe', function($sce) {
return $sce.trustAsHtml;
});
然后在你的 html 中它会被用作 ng-bind-html="node.text| unsafe"
我正在尝试构建此处的菜单:
然而,当我将它实施到我的项目中时,我收到以下错误消息:
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>
我通过在 link 中添加一个 {{node.text}} 解决了这个问题,因为那里什么都没有我没想过要检查它,因为它在 [=13] 上以某种方式工作=].
问题是您使用的 ng-bind-html-unsafe
已从 Angular 1.2+ 中弃用,您应该将其替换为 ng-bind-html
然后您需要清理 html使用 $sce
服务使用 $sce.trustedAsHtml
方法。
为此,您应该编写自定义过滤器并在任何您想要显示的地方应用该过滤器 HTML
app.filter('unsafe', function($sce) {
return $sce.trustAsHtml;
});
然后在你的 html 中它会被用作 ng-bind-html="node.text| unsafe"