javascript - Converting jQuery Modal Service to AngularJS directive doesn't allow 2 way binding -


i've inherited legacy system previous colleague working on, asked remove server side components app , replace them angularjs... it's old jsp system , bit of hack. anyway, there jquery library within old system produces modal windows, rather have add ui-bootstrap colleague converted jquery service angularjs directive , kind of works... 1 exception, here directive code...

   .directive('popupwindow', ['$document', '$compile', function ($document, $compile, messagesservice) {          "use strict";          return {             restrict: 'a',             scope: {},              link: function (scope, element, attrs) {                  var newpopup = new basebox({                          contenturl: '/ng/xtemplate/widgets/ccc/' + scope.gettype + '.html',                         type: 'regular',                         id: 'sf-basebox',                         hidebackground: false,                         overlay: true,                         resolvetest: {gettype: scope.gettype, message: scope.message, config: scope.config }, // appended modal window ng-init , renders correctly!                         closeonoverlay: false,                         closeicon: true,                         checkoldie: true,                         aftercontentload: function () {                             $compile($document.find("#basebox"))(scope);                             scope.$apply();                         }                     });                      newpopup.create();                      }                 });              }         };     }]); 

now works allows import html templates, produces modal window , allows set various properties, allows pass data objects (see resolvetest property) controller of model window. works! within angularjs templating {{ }} rendered , can use angular directives such ng-init, ng-repeat, etc, etc... when trying have 2 way binding between view , controller nothing seems work, data gets rendered controller view not other way around. view never updates... here view , controller

.controller('reportmodelctrl', function ($scope) {     $scope.val = {};     $scope.val.foo = 'blue';    }) 

here view...

<div ng-controller="reportmodelctrl">     <input type="text" ng-model="val.foo"> {{ val.foo }} default 'blue' never updates </div> 

like say, dynamically add ng-init modal template , works, when amend text box nothing happens. can think of i'm missing? if try update values using methods in controller , ng-click in view nothing updated. calling $scope.$apply() results in error. need add form view? sorry jquery basebox library isn't included here thought add confusion. want suggestions or hints getting 2 way binding work rather full answer.


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -