我一直在努力让我的AngularJS应用程序显示基于模板的视图.
问题: UI路由器似乎是正确的"路由"的所有文件,因为模板文件(landing.html)被传递到控制台作为对象(见console.log(result)中main.js图).然而,模板文件没有在应用程序中显示<div ui-view></div>.
index.html的:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
@@include('partials/head.html')
<body>
@@include('partials/header.html')
<div ui-view></div>
@@include('partials/footer.html')
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
main.js:
angular.module('myApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/',
controller: 'LandingCtrl as landing',
templateUrl: 'templates/landing.html'
});
$urlRouterProvider.otherwise('/landing');
}])
.run(['$http', '$templateCache', function($http, $templateCache) {
$http.get('templates/landing.html', {
cache: $templateCache
}).then(function(result) {
console.log(result);
});
}]);
Run Code Online (Sandbox Code Playgroud)
我的模板文件landing.html:
<main class="content">
@@include('partials/search.html')
<h2>Show me the contents of landing.html!</h2>
</main>
Run Code Online (Sandbox Code Playgroud)
我正在使用咕噜声并确保让它既可以观看也可以复制/templates到其中/dist …
我有一个使用许多 SVG 图像的网站,但有一个 SVG 文件显示不正确,并且似乎在图标内重复出现(下面用红色圈出)。
这只会影响一张图像:
<svg id="_1" data-name="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 215.24">
<defs>
<style>.cls-1,.cls-3{fill:#fff;}.cls-2,.cls-3{fill-rule:evenodd;}.cls-2{fill:url(#GradientFill_1);}.cls-3{opacity:0.84;}.cls-4{font-size:188.94px;fill:#1a1a18;stroke:#fff;stroke-miterlimit:5;stroke-width:0.28px;font-family:TimesNewRomanPSMT, Times New Roman;letter-spacing:-0.06em;}
</style>
<linearGradient id="GradientFill_1" x1="100.1" y1="90.61" x2="47.48" y2="68.54" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fab400"/>
<stop offset="1" stop-color="#8e4107"/>
</linearGradient>
</defs>
<title>150x150</title>
<rect class="cls-1" y="20.64" width="150" height="150" rx="4" ry="4"/>
<path class="cls-2" d="M72.28,130.67A51.72,51.72,0,1,0,20.56,78.94,51.83,51.83,0,0,0,72.28,130.67Z" transform="translate(0 20.64)"/>
<path class="cls-3" d="M54.77,59.41,35.47,56q3.27-11.83,11.26-17.51t23.71-5.68q14.28,0,21.3,3.37c4.64,2.26,7.94,5.11,9.83,8.59s2.85,9.83,2.85,19.12l-.31,24.9a87.84,87.84,0,0,0,1,15.69,45.24,45.24,0,0,0,3.81,10.82H87.76c-.55-1.4-1.25-3.48-2-6.23a26,26,0,0,0-.75-2.49,38.15,38.15,0,0,1-11.67,8A33.11,33.11,0,0,1,60,117.3q-12.41,0-19.58-6.77a22.46,22.46,0,0,1-7.16-17.09,23,23,0,0,1,3.27-12.19,21.31,21.31,0,0,1,9.16-8.2q5.88-2.84,17-5c10-1.87,16.89-3.63,20.72-5.24V60.68c0-4.15-1-7.11-3-8.9s-5.89-2.65-11.52-2.65c-3.81,0-6.77.75-8.9,2.28s-3.87,4.18-5.19,8ZM83.4,76.68Q79.32,78,70.41,80c-5.91,1.27-9.8,2.52-11.62,3.71a9,9,0,0,0-4.18,7.52A10.45,10.45,0,0,0,58,98.94a11.66,11.66,0,0,0,8.51,3.27,18.65,18.65,0,0,0,11-3.79,13.46,13.46,0,0,0,5.08-7.08c.54-1.81.83-5.29.83-10.4Z" transform="translate(0 20.64)"/>
<text class="cls-4" transform="translate(7.8 157.16)">A</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
当我单独显示此图像(在浏览器中单独打开)时,它看起来很正常。
问题:问题可能来自 SVG 中的代码吗?我不是 SVG 专家,但由于它是一百多个图标中唯一显示此行为的图标,因此这是我首先要查找的地方。
编辑1:图像声明为:
<a href="tool/{{{urlencode product}}}" data-navigo class="tool__format" style="background-image:url(https://assets.doctoolhub.com/{{{getToolLogo product}}})">
Run Code Online (Sandbox Code Playgroud)
编辑2:CSS样式tool__format
.tool__format { …Run Code Online (Sandbox Code Playgroud) 我正在使用过滤器函数在名为 的数组中查找 JSON 对象arrayList,其中包含例如:
[
{
"name": "Markdown",
"extension": "(.md)"
},
{
"name": "MultiMarkdown",
"extension": "(.mmd, .txt)"
}
]
Run Code Online (Sandbox Code Playgroud)
我正在使用以下代码在name字段上搜索并找到具有特定名称的对象的匹配项:
findFormat = (name) => {
let format = arrayList.filter(function (el) {
let pattern = new RegExp(name);
return el.name.match(pattern);
});
return format.name
}
Run Code Online (Sandbox Code Playgroud)
因此,如果我正在搜索名称为“Markdown”的对象,则该字符串将通过name上述函数中的参数传递,并且RegExp表达式解析为/Markdown/.
对于过滤器功能本身,我已经实现了MDN 文档底部描述的polyfill:
if (!Array.prototype.filter)
Array.prototype.filter = function(func, thisArg) {
'use strict';
if ( ! ((typeof func === 'Function') && this) )
throw new …Run Code Online (Sandbox Code Playgroud)