Angular - for PE Blocks

DBblock bound to HTML and when required the Option Dialog

by Ben Clayton

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<div class="blk" ng-controller="DBsample">
    <button ng-click="openOptions($scope)">Open Options</button>
    <input type=number ng-model="width" />
    {{sc}}
    <div class="box" style="width:{{width}}px;height:{{height}}px">{{width}} x {{height}}</div>
</div>

CSS

input {
    width:40px;
    margin:3px;
}
.box {
    border:1px solid green;
    text-align:center;
    padding:10px;
}
.dlg {
    position:fixed;
    right:10px;
    border:1px solid green;
    border-radius:10px;
    padding:10px;
    background-color:#C0C0C0;
}

JavaScript

var app = angular.module('block', [])
      .controller('DBsample', function ($scope) {
      $scope.width = 100;
      $scope.height = 123;
      $scope.$watch('width', function () {
          //alert('hey, width has changed!');
      });
      $scope.openOptions = function (scope) {
          // add new HTML template to page
          var html = '<div class="dlg" ng-controller="DBsample">' +
              ' w={{width}} <br/>' +
              'Width = <input type=number ng-model="width" /> <br/>' +
              'Height = <input type=number ng-model="height" />' +
              '</div>';
          var $nb = $(html);

          $('body').append($nb);
          //---------------

          // init angular on new block in page
          // not quite right>>> angular.bootstrap($nb[0], ['block']); 
          // init angular on new block in page

          //---------------
			//debugger;
  //        var s2 =s;
  //        angular.element( $('.blk')[0] ).injector().invoke(function ($compile) {
 //             $compile($nb)(s2);
 //         });
		//-------------------

         angular.element( $('.blk')[0] ).injector().invoke(function ($compile) {
              $compile($nb)(scope);
          });
          

      }

  });

  $(document).ready(function () { // could use angular.element(document).ready
      angular.bootstrap($(".blk")[0], ['block']); // init angular on block in page when dom ready
  });
  //https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating  
  //https://docs.angularjs.org/guide/bootstrap