Fix non-initialized angular app when adding matrix field

Rewrite how anguilar app initialization occurs, making it more robust,
more crafty and smaller

Author: nervetattoo

fieldtypes/Mediaflow_MediaFieldType.php

@@ -10,12 +10,11 @@ public function getName()
 
     public function getInputHtml($name, $value)
     {
-        $id = craft()->templates->formatInputId($name);
-        $class = get_class($this->element);
-        $inMatrix = $class === 'Craft\Mediaflow_MediaFieldType';
+        $id = craft()->templates->namespaceInputId($name);
+        $js = "angular.bootstrap(document.querySelector('#{$id}-field .mediaflow-app'), ['mediaflow']);";
+        craft()->templates->includeJs($js);
         $emptyDefaults = array('id' => null);
         return craft()->templates->render('mediaflow/input', array(
-            'inMatrix' => $inMatrix,
             'id' => $id,
             'name'  => $name,
             'value' => $value ? $value->getAttributes() : $emptyDefaults,

resources/bootstrap.js

@@ -1,7 +1,4 @@
 var mediaflow = angular.module('mediaflow', ['angularFileUpload']);
-mediaflow.config(function ($interpolateProvider) {
-    $interpolateProvider.startSymbol('[[').endSymbol(']]');
-});
 
 mediaflow.filter('sizeConverter', function () {
     return function (size, precision) {

resources/mediaflow-ng.js

@@ -33,6 +33,8 @@
 {% endset %}
 
 {% set content %}
+
+{% raw %}
 <div ng-app="mediaflow" ng-controller="MediaFlowCtrl">
     <div ng-hide="connection" class="error ng-cloak">Failed to connect to Mediaflow using current settings</div>
     <div class="elementindex" ng-show="connection" ng-controller="MediaFlowBrowseCtrl">
@@ -74,12 +76,12 @@
                         <tr ng-repeat="medium in media|filter:searchText">
                             <td scope="row">
                                 <div class="element hasthumb">
-                                    <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="[[medium.thumb]]" />
-                                    <div class="label"><span class="title">[[medium.name]]</span>
+                                    <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="{{medium.thumb}}" />
+                                    <div class="label"><span class="title">{{medium.name}}</span>
                                     </div>
                                 </div>
                             </td>
-                            <td data-title="Size">[[medium.file.size|sizeConverter]]</td>
+                            <td data-title="Size">{{medium.file.size|sizeConverter}}</td>
                         </tr>
                         </tbody>
                     </table>
@@ -90,8 +92,8 @@
                 <ul class="thumbsview">
                     <li ng-repeat="medium in media|filter:searchText">
                         <div class="element hasthumb">
-                            <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="[[medium.thumb]]" />
-                            <div class="label"><span class="title">[[medium.name]]</span>
+                            <img ng-show="medium.isImage" class="elementthumb elementthumb4" ng-src="{{medium.thumb}}" />
+                            <div class="label"><span class="title">{{medium.name}}</span>
                             </div>
                         </div>
                     </li>
@@ -101,6 +103,9 @@
         </div>
     </div>
 </div>
+
+{% endraw %}
+
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
 {% includeCssResource "mediaflow/style.css" %}

templates/index.html

@@ -3,31 +3,32 @@
         Failed to connect to Mediaflow using current settings
     </div>
     <div ng-show="connection" ng-controller="MediaFlowFieldCtrl">
+        {% raw %}
         <div class="mediaflow-preview clearafter" ng-show="selected.id">
             <div class="thumb">
-                <img ng-src="[[selected.thumb]]">
+                <img ng-src="{{selected.thumb}}">
             </div>
                 <table class="mediaflow-meta">
                     <tbody>
                         <tr>
                             <th>Name</th>
-                            <td>[[selected.name]]</td>
+                            <td>{{selected.name}}</td>
                         </tr>
                         <tr>
                             <th>Width</th>
-                            <td>[[selected.file.width]]</td>
+                            <td>{{selected.file.width}}</td>
                         </tr>
                         <tr>
                             <th>Height</th>
-                            <td>[[selected.file.height]]</td>
+                            <td>{{selected.file.height}}</td>
                         </tr>
                         <tr ng-show="selected.uploaded">
                             <th>Uploaded</th>
-                            <td>[[selected.uploaded|date:'short']]</td>
+                            <td>{{selected.uploaded|date:'short'}}</td>
                         </tr>
                         <tr>
                             <th>Size</th>
-                            <td>[[selected.file.size|sizeConverter]]</td>
+                            <td>{{selected.file.size|sizeConverter}}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -68,24 +69,21 @@
                 <ul>
                     <li ng-repeat="medium in media">
                         <img ng-show="medium.isImage"
-                            ng-src="[[medium.thumb]]"
+                            ng-src="{{medium.thumb}}"
                             ng-click="select(medium)"
                         >
                     </li>
                 </ul>
             </div>
         </div>
+        {% endraw %}
         <div ng-init="selected={{value|json_encode()}}"></div>
-        <input type="hidden" value="[[selected|json]]" name="{{name}}" />
+        <input type="hidden"
+            {% raw %}value="{{selected|json}}"{% endraw %}
+            name="{{name}}" />
     </div>
 </div>
 {% includeJsResource "mediaflow/angular.min.js" %}
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
-{% includeJsResource "mediaflow/bootstrap.js" %}
 {% includeCssResource "mediaflow/style.css" %}
-{% if inMatrix %}
-<script>
-    mediaflowBootstrap();
-</script>
-{% endif %}