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
Post a Comment