I ran into a problem in the browser IE11. The project is in Angular 2/4.
Error: Multiple definitions of a property not allowed in strict mode.
In file main.bundle.js
I had the same issue, It is because I tried to use some code like a case on ng-class attribute.
To solved I just change this
<div class="imgComment" ng-class="[{'.jpg':'imgJpg',
'.csv':'imgCsv',
'.xls':'imgXls',
'.xlsx':'imgXlsx',
'.doc':'imgDoc',
'.docx':'imgDocx',
'.msg':'imgMsg',
'.png':'imgPng',
'.pdf':'imgPdf',
'.jpg':'imgJpg',
'.jpeg':'imgJpeg',
'.zip':'imgZip',
'.rar':'imgRar',
'.txt':'imgTxt'}['{{f.fileExtension}}']]"
title="{{f.originalFileName}}" ng-click="showImage(f.sharePointPath)">
</div>
for this
<div class="imgComment {{f.style}}" title="{{f.originalFileName}}" ng-click="showImage(f.sharePointPath)"></div>
and send the class in f.Style attribute
I don't know if the problem was because I put 2 '.jpg' options in the case of the ng-class, I just change the code and works.
Related
I'm trying to create a responsive <div> inside a React return() statement, but every way I turn, my code is errored in VSCode. One example of my numerous efforts to structure this (and the one recommended by chatGPT) is:
<div>
{props.platform === "desktop" ? <div className="displaydiv"> : <div>}
</div>
</div>
In this case, the first <div> is errored by VSCode as having no closing tag.
I'm unsure whether or not this code would actually run, ie whether the problem might just be over-enthusiastic VSCode checking. But even if this is the problem, this is no help to me as these errors will obscure genuine errors in my project.
No, ternary on just the opening tag won't work. You can put it on the required attribute:
<div className={props.platform === "desktop" ? "displaydiv" : ""}>
</div>
I am finding problem in adding the external js file to Ionic 3. Here is what I did, I have created a hamburg.js file in src/js/hamburg.js, and called the script file in index.html at app/index.html. And I have added the html code in testpage.hmtl and css in testpage.scss. Also declared in app.component.ts. Here is my code
app.component.ts
declare var wrapperMenu;
hamburg.js
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
index.html
<script src="assets/js/hamburg.js"></script>
testpage.html
<div class="wrapper-menu">
<div class="line-menu half start"></div>
<div class="line-menu"></div>
<div class="line-menu half end"></div>
Can somebody guide me please?
There is no need to external js file, this plugin play mostly with CSS.
this snippet
var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
wrapperMenu.classList.toggle('open');
})
can be putted on app.component.ts file. or if you have separate component for the header will be better to put the code in its ts file specifically on ngOnInit() hook.
Edit the best hook in component life-cycle is to put this code into ngAfterViewInit() hook.
Edit 2: Another good practice is to used the predefined class menu-content-open that is added automatically when the menu is opened and you can change the selector in your CSS code from .open to menu-content-open
check my forked example from your original one here.
Note the code will work perfect when you add it into the ionic app.
I'm using ng-attr-data-index={{$index}} in here:
<div class="entry__row" ng-repeat-n="entryRows" ng-attr-data-index={{$index}}>
...
</div>
Now, angular added data-index=0 (and so on) properly, but ng-attr-data-index={{$index}} is still there, and I get this error from console:
TypeError: t.removeAttribute is not a function
Also, this is ng-repeat-n: https://github.com/connorbode/angular-repeat-n
I am using ng-bind-html which is running html code fine but when I tried to run JavaScript code using script tag it did not work. see example over here (Fiddle).
app.js file
app.constant('text',"<script>alert('this is alert')</script>");
app.constant('color', 'blue' );
controller.js
var module = angular.module('cntrl');
module.controller('DCtrl', function(
$scope,
$timeout,text,color) {
$scope.bannertext=text;
$scope.bannercolor=color;
});
frontend.html
<div ng-bind-html="bannerText"> </div>
this is giving me normal text like <script>alert('this is alert')</script> so how i can run javascript uisng above code
Imcomplete answer, but see changed JSFiddle at: https://jsfiddle.net/km31gwvx/1/
Replace < with < entity
Specify Angular as library in Frameworks and Extensions
We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so
<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"
MyCtrl1 would become available to the code inside include1.html.
This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.
I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.
Additionally, what would be the correct way to specify a controller for my ng-includes?
Why not move the ng-controller from the element having ng-include to inside the template:
index.html:
<div data-ng-include="'include1.html'"></div>
<div data-ng-include="'include2.html'"></div>
include1.html
<div data-ng-controller="MyCtrl1">
<h1>{{Username}}</h1>
</div>
include2.html
<div data-ng-controller="MyCtrl2">
<h1>{{Username}}</h1>
</div>
It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:
Issue 1, Issue 2, Issue 3 and SO post.