Pass angularJs Scope content to javascript variable

Question

I'm trying to save an AngularJS $scope variable, htmlContent, into a JavaScript variable, test, so I can send the data to a c# controller method. However it is not working. What am I doing wrong?

<script type="text/javascript">
        angular.module("textAngularTest", ['textAngular']);
        function wysiwygeditor($scope) {
            $scope.orightml = '<h2>New Note...</h2>';
            $scope.htmlcontent = $scope.orightml;
            $scope.disabled = false;

            //I'm not getting any data passed to the "test" variable
            var test = $scope.htmlcontent;

            $("#newnote").click(function () {

                $.post("/Home/SaveWNote", { jsonData: test });

            });


        };

    </script>

Why use Jquery if you have Angular... It's the "anti-pattern" of Angular. Jquery may be use only if there's no possibility with Angular services/directives etc. — Mik378
– Mik378, Commented Aug 10, 2014 at 17:03
Ok. I'm a newbie on angular. What is the correct way to send the data $scope.htmlcontent to a ActionResult in my controller? — user3228992
– user3228992, Commented Aug 10, 2014 at 17:17

sylwester · Accepted Answer · 2014-08-10 17:33:50Z

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

JS:

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

app.controller('AppCtrl', function($scope, $http) {
  $scope.htmlcontent  = "<h2>New Note...</h2>";

  $scope.save =function() {

    console.log( $scope.htmlcontent );

     $http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });

  }
});

HTML:

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>

  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">

  <div ng-controller="AppCtrl">
      <div text-angular ng-model="htmlcontent "></div>

      <button ng-click="save()">Save</button>
      <br/>

 Your htmlcontent <pre>{{htmlcontent}}</pre>
 </div>
</body>
</html>

Collectives™ on Stack Overflow

Pass angularJs Scope content to javascript variable

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