我想在我的Angular 2应用程序中的组件模板中设置DIV的背景图像.但是我在我的控制台中不断收到以下警告,但是我没有达到预期的效果......我不确定动态CSS背景图像是否因为Angular2中的安全限制或者我的HTML模板被破坏而被阻止.
这是我在控制台中看到的警告(我已将我的img网址更改为/img/path/is/correct.png:
警告:清理不安全的样式值url(SafeValue必须使用[property] = binding:/img/path/is/correct.png(请参阅http://g.co/ng/security#xss))(请参阅http:// g.co/ng/security#xss).
问题是我使用DomSanitizationServiceAngular2中的方法清理注入模板的内容.这是我在模板中的HTML:
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是组件......
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private …Run Code Online (Sandbox Code Playgroud) 我刚刚开始学习C#和ASP.NETMVC,但我发现的每个例子都将数据库放在App_Data文件夹中.我不想这样做.
我想创建一个新版本的Nerd Dinner并将连接字符串移动到web.config,但我找不到任何关于如何操作的示例.我的数据库名为NerdDinner,我正在使用SQL Server Express.
将新连接字符串添加到我的Web配置的正确语法是什么?这对创建LINQ to SQL类有什么影响吗?
在我学习和改进我的JavaScript的过程中,我遇到了一个带有switch/case语句的脚本,我注意到一些变量在++之前使用带有变量的++递增,然后一些变量在变量之后有++.这些有什么区别?这是我试图解释m和y变量的一个例子.
switch(f){
case 0:{
++m;
if(m==12){
m=0;
y++;
}
break;
}
case 1:{
--m;
if(m==-1){
m=11;
y--;
}
break;
}
case 2:{
++y;
break;
}
case 3:{
--y;
break;
}
case 4:{
break;
}
}
Run Code Online (Sandbox Code Playgroud) 我只是写了一些简单的代码,我注意到使用document.writeln没有写入新行,允许我演示...
// this is my JSON object
var myObject = {
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": [{
"Address1": "11 My Street",
"Address2" : "Nice Area",
"Town" : "Nice Town",
"PCode" : "P05T 0DE"
}]
}
document.writeln(myObject.firstName);
document.writeln(myObject.address[0].Address1);
Run Code Online (Sandbox Code Playgroud)
现在这输出以下....
John 11 My Street
这一切都在一条线上?如果我使用document.write()我会期待这个吗?它发生在IE和Firefox中.显然我可以添加+ "<br/>"或+ "\n"但我不应该这样做?
我是傻瓜吗?
我的界面/ webform上有以下内容:
<div id="mydiv" class="forceHeight" runat="server" />
Run Code Online (Sandbox Code Playgroud)
现在我的代码中有一个条件,如果某种情况属实,我需要forceHeight从该控件中删除该类.我知道在C#中你可以使用:
mydiv.CssClass.Replace("forceHeight", "");
Run Code Online (Sandbox Code Playgroud)
我不太确定你是怎么用VB做的?Intellisense不提供这个选项吗?
任何人的想法?
我有一个问题 - 我忘记了如何编码!我有一个angularJS指令,它位于父包装器标签(DIV)上,在我的指令中我想循环遍历子节点(第一个子DIV).我有以下内容
<div data-check-attributes>
<div data-ng-repeat="user in Users" data-id="{{ user.ID }}" data-ng-click="doSomething(user.ID)" data-new="{{ user.newUser }}" class="">
<div> {{ user.userName }} </div>
<div> {{ user.userAge }} </div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现在在我的指令中我想循环遍历第一个子div(可能有很多这些,但我在加载的视图中看到10个用户)并在我的指令中执行某些检查和修改,使用数据属性,$ location对象和可能还有更多...但是我不记得如何遍历第一个子div,我似乎得到了我尝试过的所有错误...到目前为止我有这个,这不起作用!在下面的示例中,我只想将第一个子节点的data-id写入控制台
.directive('checkAttributes', function ($location) {
return{
restrict: 'A',
link: function (scope, element) {
// will use $location later
console.log(angular.element(element)[0]); // this outputs the HTML
console.log(angular.element(element)[0].children().length); // this errors, TypeError: object is not a function
for (var i = 0; i < angular.element(element)[0].children.length; i++) {
console.log(angular.element(element)[0].children[i].getAttribute('data-id'));
}
}
};
});
Run Code Online (Sandbox Code Playgroud)
我很困惑......请帮忙!
在指令的link函数部分中,我们可以访问该element对象.我想确定element对象是否在当前视口中/是否可用.
我目前有以下内容:
link: function (scope, element, attrs, controller) {
var page = angular.element(window);
page.bind('scroll', function () {
var windowScroll = page[0].pageYOffset,
windowHeight = page[0].innerHeight;
// elementScroll = element.xpos; - this is undefined?
// elementScroll = element.getBoundingClientRect().top - this does not work... undefined?
// elementScroll = element[0].getBoundingClientRect().top - this does not work... undefined?
// ... logic follows that if elementScroll is between windowScroll & windowScroll + windowHeight it is visible!
});
Run Code Online (Sandbox Code Playgroud)
我似乎无法获得我的特定元素的x和y位置(该指令可能会重复多次).
请注意,我不打算在我的应用程序中安装或使用jQuery.
我想在我的Angular2应用程序中手动执行页面转换.所以我到目前为止所做的是产生了一个服务,我从一个处理导航的组件调用.当您单击某个链接,图标或我称之为AnimationService goTo方法的任何内容时.这将接收一个URL并推送到Observable流/主题.这是迄今为止的服务:
@Injectable()
export class AnimationService {
// should you be a directive?
animationStream: Subject<string> = new Subject<string>();
animationStreamEnd:Subject<string> = new Subject<string>()
constructor() {
// this is to listen for when it is time to navigate to whereever?
this.animationStreamEnd.subscribe(resp => {
// redirect the url / app here
this.router.go(resp);
});
}
goTo(url:string): void {
// so, broadcast down to trigger the css animation...
this.animationStream.next(url);
}
}
Run Code Online (Sandbox Code Playgroud)
我希望动画的内容ngClass在它的HTML模板中有一个条件,就像这样[ngClass]="{'animate-left': applyTransitionClass}",它看起来像这样
<div class="gridClass" [ngClass]="{'animate-left': applyTransitionClass}">
<div class="gridRow">
<route-view></route-view> …Run Code Online (Sandbox Code Playgroud) 我刚刚在javaScript中编写了这个正则表达式,但它似乎不起作用,这是我的函数:
function isGoodDate(dt){
var reGoodDate = new RegExp("/^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/");
return reGoodDate.test(dt);
}
Run Code Online (Sandbox Code Playgroud)
这就是我在表单验证中调用它的方式
if(!isGoodDate(userInput[1].value)){
alert("date not in correct format of MM/dd/YYYY");
return false;
}
Run Code Online (Sandbox Code Playgroud)
现在我希望它返回MM/DD/YYYY但是如果我在其中放置一个有效的日期会引发警报?任何人的想法?
我正在尝试使用jQuery进行简单的文件上传.我的HTML中有一个文件输入,如下所示:
<form id="PhotoUploadForm" action="/some/correct/url" method="post" enctype="multipart/form-data">
<input type="file" id="uploadPhoto" accept="image">
</form>
Run Code Online (Sandbox Code Playgroud)
我还有一些JavaScript/jQuery绑定到输入的change事件,如下所示:
$('#uploadPhoto').on("change", function (event) {
var fileData = this.files[0];
var data = new FormData();
data.append('image',fileData);
data.append('content','What could go wrong');
console.log(data.image, data.content); // this outputs 'undefined undefined' in the console
$.ajax ({
url: "/some/correct/url",
type: 'POST',
data: data,
processData: false,
beforeSend: function() {
console.log('about to send');
},
success: function ( response ) {
console.log( 'now do something!' )
},
error: function ( response ) {
console.log("response failed");
}
});
}); …Run Code Online (Sandbox Code Playgroud) javascript ×6
angular ×2
angularjs ×2
typescript ×2
asp.net ×1
asp.net-mvc ×1
c# ×1
html ×1
jquery ×1
regex ×1
sql-server ×1
vb.net ×1
xss ×1