admin管理员组

文章数量:1345291

I wish to modify value of an ngModel variable from my controller. However it doesn't seem to be reflecting in views. I have seen few other questions on SO but none worked for me. I want a solution where I do not need to create a new directive for this. I have also tried to wrap the change in $scope.$apply without success.

Here is plunkr demonstrating the issue.

Here is code from plunkr

JavaScript Controller:

    app.controller('MainCtrl', function($scope) {
  $scope.Attachment = "something"
  $scope.change = function () {
      $scope.$apply(function() {
          $scope.Attachment = "otherthing";
      });
}

HTML:

<body ng-controller="MainCtrl">
    <section class="content" ng-app="offer">
        <div>
            <button name="change" ng-click="change()" ng-model="Attachment">change</button>
            <!-- <input name="Attachment" type="file" class="file_up" onchange="angular.element(this).scope().change(this)" ng-model="Attachment" /> -->
            <span>{{Attachment}}</span>

        </div>
    </section>
</body>

I wish to modify value of an ngModel variable from my controller. However it doesn't seem to be reflecting in views. I have seen few other questions on SO but none worked for me. I want a solution where I do not need to create a new directive for this. I have also tried to wrap the change in $scope.$apply without success.

Here is plunkr demonstrating the issue.

Here is code from plunkr

JavaScript Controller:

    app.controller('MainCtrl', function($scope) {
  $scope.Attachment = "something"
  $scope.change = function () {
      $scope.$apply(function() {
          $scope.Attachment = "otherthing";
      });
}

HTML:

<body ng-controller="MainCtrl">
    <section class="content" ng-app="offer">
        <div>
            <button name="change" ng-click="change()" ng-model="Attachment">change</button>
            <!-- <input name="Attachment" type="file" class="file_up" onchange="angular.element(this).scope().change(this)" ng-model="Attachment" /> -->
            <span>{{Attachment}}</span>

        </div>
    </section>
</body>
  • javascript
  • angularjs
  • angular-ngmodel
  • angularjs-ng-model
Share Improve this question edited Aug 26, 2015 at 13:11 Abhishek Bansal asked Aug 26, 2015 at 13:08 Abhishek BansalAbhishek Bansal 5,3554 gold badges44 silver badges71 bronze badges 10
  • 1 add relevant code from plunker to your post also – Grundy Commented Aug 26, 2015 at 13:09
  • 2 you not need $apply for click event, remove it and all work – Grundy Commented Aug 26, 2015 at 13:10
  • @DRobinson, nope, here not this case :-) – Grundy Commented Aug 26, 2015 at 13:12
  • @DRobinson, add plunker with sample :-) – Grundy Commented Aug 26, 2015 at 13:13
  • 1 @DRobinson, but you remove $apply, and in ment you say only about "dot" ;-) – Grundy Commented Aug 26, 2015 at 13:15
 |  Show 5 more ments

4 Answers 4

Reset to default 3

It's a best practice to bind to object properties instead of primitive types.
You are binding to a string which is a primitive type and is immutable.
You should also remove the $apply as it is not necessary since you are under the angular hood so it will perform the $apply automatically.

If you add your data as a property of an object you will not lose the reference anymore:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  //this has changed:
  $scope.data = {
    Attachment: "something"
  }

  $scope.change = function() {
    //and $apply was removed from here
    $scope.data.Attachment = "otherthing";
  }
});

and in the html you just need to change:

<span>{{data.Attachment}}</span>

EDIT: although some other answers are correct, I thought you should see what's a best practice for binding. The updated plunker here.

Remove the ng-model from the button and remove the $scope.$apply from the change handler:

http://plnkr.co/edit/lOyoTBxs0L0hMs20juLS?p=preview

Check this one may help you

function MyController($scope) {

  $scope.Attachment = "something"
  $scope.change = function() {

    $scope.Attachment = "otherthing";

  }
}
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app ng-controller="MyController">
  <button name="change" ng-click="change()" ng-model="Attachment">change</button>

  <span>{{Attachment}}</span>
</div>

You shouldn't need to use $scope.$apply(). I made this change to the plunkr to get the view to update.

app.controller('MainCtrl', function($scope) {
  $scope.Attachment = "something"
  $scope.change = function () {
      $scope.Attachment = "other";
  }
});

本文标签： javascriptChanging ngModel value programatically from controllerStack Overflow

版权声明：本文标题：javascript - Changing ngModel value programatically from controller - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743794896a2540248.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。