Home > Developer > Web Develop
Background
As MVVM matures, building a web App with jquery is now obsolete, and using jquery to write more code to control DOM values, assignments, binding events, and so on, MVV from the bottom up to support the above operations, allowing programmers to get from the original complex, The free repetition of the code allows programmers to focus more on the implementation of the business, the interaction of the data, and greatly reduces the amount of code the programmer needs to write.
Over the years the Web experience tells us that the most difficult place to write Web applications is mainly browser compatibility issues, and more compatibility issues mainly embodied in IE, so long as the problem can be solved in IE, the Web application of the other problems are no longer a problem.
Today, I will use ANGUALRJS to build a browser-compatible Web application, in fact, mainly to solve some of the problems under IE, roughly the following:
This will use the version 1.0.7 of the angular, which is due to the fact that the version has a better support for the lower version of IE, and there are fewer bugs, and there are serious problems with the high version on labels such as Ngshow, Nghide, ngbindhtml, and so on.
Build apps under IE
In Chrome, FF and other browsers, we can directly in the HTML or body tag directly bound Ngapp to bind the ANGULARJS application, but in IE is not possible, this is because the low version of IE does not support some features of HTML5 and JSON objects, So we need to introduce 2 JS to solve this problem:
With the above 2 JS files, ie under the binding Ngapp a slightly different way, need to have class, Ngapp, ID support, the code is as follows:
<body class= "Ng-app:myapp" id= "Ng-app" ng-app= "myApp" >
Unsafe problem of a tag under IE
When the href of the a tag is bound to a valid URL, the binding of other events cannot be triggered, such as: click, but if there is no href or href is empty, there is an unsafe problem under IE, so we need to bind javascript:void (0) to the href, This solves both the problem of unsafe and the bug that can not trigger the event.
NGSRC cannot bind correctly under IE.
Under IE, whether using NG-SRC or ng-src= "{{xx}}" Can not let img display pictures, and in the low version of IE using the attribute = "{{xx}" is not able to implement the functionality you want, so you can only use the custom instructions to implement some of the unsupported tags.
Here I myself implemented a CUSTOMSRC instruction to solve the ngsrc problem under IE, the approximate code is as follows:
Myapp.directive (' Customsrc ', function () {return {scope: {data: ' = '},link:function (scope, element, Attrs) {scope. $watch (' Data ', function (v) {if (!v) return;element.attr (' src ', v);});}};});The problem of ngmouseleave under IE
In fact, this is not a ng-mouseleave bug, but under IE, for MouseLeave and mouseover performance is different, first we look at a piece of HTML code, such as:
<div ng-click= "Display=!display" > drop-down single </div><div ng-show= "display" ng-mouseleave= "Display=false" > <div> title </div><ul><li>item1</li><li>item2</li><li>item3</li ></ul></div>
In Chrome, FF and other browsers, the script is still running smoothly, but in IE, there will be a problem, that is, when the mouse moved into the UL, the column surface of the dropdown will disappear, but in the UL add ng-mouseover= "Display=true" after, This bug is going to work.
Some questions about creating service under IE
When I create a module, I usually return this function directly if the module has only one method, the sample code is:
Seajsmodule.exports = function () {//coding};//angularmyapp.service (' $fn ', function () {return function () {//coding};});Under IE, the $FN () is not correctly called, there will be an exception, so you need to make some adjustments, code such as:
Angularmyapp.service (' $fn ', function () {return {exec:function () {//coding}};});There is no problem with using $fn.exec () under IE.
Some problems of using swfupload under IE
Using SWFUpload in the low version of IE, the most common problem is the version of the Flash problem, so first of all to ensure that the version of IE Flash.
Occasionally encounter an "exception is thrown and not caught", when the exception occurs, the main attention to 2 issues:
1, back to the background data, you need to set the response flow head of the ContentType for text/html; Charset=utf-8
2, IE binding swfupload button_placeholder elements can not be included in the ng-repeat, such as:
Html<li ng-repeat= "M in IMGs" ><a href= "javascript:void (0)" ></a></li>
When we want to bind the last Li element to SWFUpload's Button_placeholder, the above error will appear under the low version ie, so be careful in using it.
End
These are some of the problems and solutions I have encountered in developing a compatible browser angular application, please let me know if you have a better solution.
So today's article is here, if there is any problem in the article please tell me, thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
