View doesn't change though scope variable has changed in angularjs

Question

I'm stuck with this for the whole day.

<table>
    <tr ng-repeat="x in usernames">
        <td>{{x.username}}</td>
        <td>
            <button type='button' ng-click='sendMessage()'>Send  Message</button>
        </td>
        <td>
            <button type="button" ng-click="deleteUser()">Delete User</button>
        </td>
    </tr>
</table>

When I press "Send Message", controller is ignited successfully.

$scope.sendMessage = function () {
    $scope.content_in = '<form novalidate>'
        +'<label>Message: &nbsp</label> <input type="text" ng-model="message"/><br><br>'
        +'<button id="mybutton" style="width:75px" ng-click="send()">Send</button>'
        +'<input id="mycancel" style="width:75px" type="reset" value="Cancel"/>'
        +'</form>';
}

I'm simply trying to update my page with a message form which will be placed in content_in variable. But the changes are not reflected in the view.

I also included:

$scope.$watch('content_in', function () {
    alert('hey, content_in has changed!');
});

in the controller, and I'm confident that the changes are made in controller. How can I make the view reflect the changes?

I haven't noticed any usage of content_in in your HTML. Please provide some relevant markup or, it would be the best, a jsFiddle or plunker. Thx! — Alex M
– Alex M, Commented Jul 15, 2016 at 11:06
$scope.$apply - not recommended to be used to force apply.... Please provide more code to see the problem. — daan.desmedt
– daan.desmedt, Commented Jul 15, 2016 at 12:24

prabhakaran S · Accepted Answer · 2016-07-15 12:20:02Z

1

Try the following approach

 myApp.controller("myController", function ($scope,  $compile, myService) 
{
    $scope.sendMessage = function () {
        var content_in = '<form novalidate>'
        +'<label>Message: &nbsp</label> <input type="text" ng-model="message" /><br><br>'
        +'<button id="mybutton" style="width:75px" ng-click="send()">Send</button>'
        +'<input id="mycancel" style="width:75px" type="reset" value="Cancel" />'
        +'</form>';
        var element = angular.element(document.querySelector("#myDiv"));
        element.empty();
        element.append(content_in);
        $compile(element.contents())($scope);
    }
});

In your design page add this div

<div id="myDiv">

answered Jul 15, 2016 at 12:20

prabhakaran S

7281 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

View doesn't change though scope variable has changed in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related