To-Tori

0728 - IonicMaterialDesign Router

// path in /IonicMaterialDesign-0/www/js/app.js

    .state('app.integration', {
        url: "/integration",
        params:{
            isAnimated:false
        },
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/customized/integration/html/index.html",
                controller: 'integrationCtrl'
            }
        }
    })
    .state('app.pixi', {
        url: "/pixi",
        params:{
            isAnimated:false
        },
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/customized/pixi/index.html",
                controller: 'pixiCtrl'
            }
        }
    })
    .state('app.matter', {
        url: "/matter",
        params:{
            isAnimated:false
        },
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/customized/matter/index.html",
                controller: 'matterCtrl'
            }
        }
    })

0804 Matter.js - engine.render is deprecated (see docs)

參照文件後，他有說改用 Matter.Render 以及參考 Demo.js 的方式去改寫
> http://brm.io/matter-js/docs/classes/Engine.html
> https://github.com/liabru/matter-js/blob/d804df4aed46509dd4f6bb0879d36f3e32057c7a/demo/js/Demo.js
> https://github.com/liabru/matter-js/blob/d804df4aed46509dd4f6bb0879d36f3e32057c7a/examples/engine.js


// 以下為程式碼, Path: svgapp.js

  var Render = Matter.Render;
  
  var matterContent = document.getElementById("matter-content");
  
  // create a Matter.js engine
  var engine = Engine.create();

  // run the engine
  Engine.run(engine);

  // create a debug renderer
  var render = Render.create({
    element: matterContent,
    engine: engine,

  })
  // run the renderer
  Render.run(render);

  render.options.wireframes = false;
  // add a mouse controlled constraint

  var mouseConstraint = MouseConstraint.create(engine, {
    element: render.canvas,
  });

在 jquery load svg 方式

// path in dr-slide3-0-jq/app.js


    link: function(scope, element, attributes){
      // ....
      // 記得 template 要切換回 object，不需要用 ng-include 
      // 而且 <object> id 要設讓 getElementById 可以抓到值
      var svgholder = document.getElementById("svgholder");

      svgholder.onload = function(element) {
          contentDocument = $("object")[0].contentDocument
          // 以下開始的操作都是 jQuery
          dJQ = $(contentDocument)
          svg = dJQ.children();
          cat = svg.find('#cat');
          cat.attr("fill", "#ff0000");
      }
      
      用 jquery 這兩種方式都沒有辦法真的等到 object 內的 svg load 完
      // angular.element(document).ready(function() {
      // $(document).ready(function() {
      
    }
      // .... 

參考來源：
http://stackoverflow.com/questions/337293/how-to-check-if-an-embedded-svg-document-is-loaded-in-an-html-page