中获取 HTML 以在编辑器中正确显示?-6ren"> 中获取 HTML 以在编辑器中正确显示?-我创建了这个 AngularJS 路由应用程序,它允许我让所有页面不在单独的 .htm 文件中,而是在一个页面上,单个页面内容在 ng-template script 元素。 虽然这可行,但问题是 N-6ren">
gpt4 book ai didi

angularjs - 如何在 <script type ="text/ng-template"...> 中获取 HTML 以在编辑器中正确显示?

转载 作者:行者123 更新时间:2023-12-05 01:32:13 26 4
gpt4 key购买 nike

我创建了这个 AngularJS 路由应用程序,它允许我让所有页面不在单独的 .htm 文件中,而是在一个页面上,单个页面内容在 ng-template script 元素。

虽然这可行,但问题是 NetBeans 和 PHPStorm 无法识别脚本标记内的 HTML,因此无法正确格式化它。

我怎样才能改变这个,以便我可以在编辑器中很好地编辑这个文件?

<html ng-app="mainApp">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />

<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
a:focus {
outline: none;
}
</style>
</head>
<body ng-cloak ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">AngularJS Routing</div>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>

<div class="col-lg-12">
<div ng-view></div>
</div>

<script type="text/ng-template" id="/home.htm">
<div class="jumbotron">
<h1>Home</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/about.htm">
<div class="jumbotron">
<h1>About</h1>
<p>{{subtitle}}</p>
</div>
</script>
<script type="text/ng-template" id="/contact.htm">
<div class="jumbotron">
<h1>Contact</h1>
<p>{{subtitle}}</p>
</div>
</script>

<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/home.htm',
controller: 'mainController'
})
.when('/about', {
templateUrl: '/about.htm',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: '/contact.htm',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
mainApp.controller('mainController', function ($scope) {
$scope.subtitle = 'the home page';
$scope.message = '';
$scope.$on("$destroy", function () {
myData.message = $scope.message;
});
});
mainApp.controller('aboutController', function ($scope) {
$scope.subtitle = 'the about page';
});
mainApp.controller('contactController', function ($scope) {
$scope.subtitle = 'the contact page';
});
</script>
</body>
</html>

最佳答案

对于 PHPStorm,我相信该功能称为“语言注入(inject)”。

您可以阅读有关如何设置的信息 here .

我不确定 netbeans,它可能没有这个功能。

关于angularjs - 如何在 &lt;script type ="text/ng-template"...> 中获取 HTML 以在编辑器中正确显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27858463/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com