4

I'm creating an Windows Store App (or metro app, or whatever they call it) using AngularJS.

I solved to Javascript RunTime Error "Unable to add dynamic content" which crashed the application (see here) and everything went fine until I beginning to use directive (undestand angular.module.directive).

Now, I have a "Unable to add dynamic content" but in the console log. Note that the app do not crash, in fact, the app works as expected!

Should I just ignore the error (I don't like that), can I do anything about it ?

A code of a "clock" app to illustrate: The app did display the correct time, formatted and incremented each second. The DOM is what I expect.

Thanks,

index.html:

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">

<script src="lib/jquery-1.8.2-win8-1.0.min.js"></script>
<script type="text/javascript">
    jQuery.isUnsafe = true;
</script>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="lib/angular/angular-resource.js"></script>
</head>

app.js

angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',controller: PhoneListCtrl}).
      otherwise({redirectTo: '/phones'});
  }])
.directive('myCurrentTime', function($timeout, dateFilter) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div> Current time is: <span>{{time}}</span></div>',
        link: function (scope, element, attrs) {
            var timeoutId;

            function updateTime() {
               scope.time = dateFilter(new Date(), 'M/d/yy h:mm:ss a');
            }

            function updateLater() {
                timeoutId = $timeout(function () {
                    updateTime();
                    updateLater();
                }, 1000);
            }

            element.bind('$destroy', function () {
                $timeout.cancel(timeoutId);
            });

            updateLater();
        }
    }
});

error:

HTML1701: Unable to add dynamic content '<my-current-time></my-current-time>
'. A script attempted to inject dynamic content or elements previously modified dynamically that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
File: index.html
Franz Strudel
  • 41
  • 1
  • 3

2 Answers2

5

This is the security if window store app. You can fix it with the following script.

Đoàn Bảo Trung
  • 72
  • 1
  • 4
  • 1
    Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Yurii Apr 06 '15 at 08:08
3

I've solved using this plugin cordova-plugin-winstore-jscompat on github. By Microsoft Visual Studio, open config.xml, go to plugin, custom, select git, and paste this url https://github.com/vjrantal/cordova-plugin-winstore-jscompat.git or with linux/unix run command cordova plugin add (git url above)

fvlgnn
  • 97
  • 2
  • 4