0

I need to call an AngularJS binding inside an inline javascript function. I cannot seem to have the data arrive there. Also, the format needs to arrive as a string.

Here is the inline javascript inside the HTML: 

<body ng-view>
    <script type="text/javascript">
            $('#comments-container').comments({
                profilePictureURL: 'https://viima-app.s3.amazonaws.com/media/user_profiles/user-icon.png',
                youText: "Angular Binding"   // HERE is where Angular binding needs to be called
                },
                roundProfilePictures: true,
                textareaRows: 1,
                enableAttachments: true,
                getComments: function(success, error) {
                    var commentsArray = [{
                        id: 1,
                        created: '2015-10-01',
                        content: 'Lorem ipsum dolort sit amet',
                        fullname: 'Simon Powell',
                        upvote_count: 2,
                        user_has_upvoted: false
                    }];
                    success(commentsArray);
                },
                postComment: function(commentJSON, success, error) {
                    success(commentJSON);
                },
                putComment: function(data, success, error) {
                    setTimeout(function() {
                        success(data);
                    }, 500);
                },
                deleteComment: function(data, success, error) {
                    setTimeout(function() {
                        success();
                    }, 500);
                },
                upvoteComment: function(data, success, error) {
                    setTimeout(function() {
                        success(data);
                    }, 500);
                },
                uploadAttachments: function(dataArray, success, error) {
                    setTimeout(function() {
                        success(dataArray);
                    }, 500);
                },
            });
    </script>
</body>

Here is the AngularJS Controller I intend to use for this portion: 

(function () {

angular
.module('meanApp')
.controller('navigationCtrl', navigationCtrl);

navigationCtrl.$inject = ['$location','authentication'];
function navigationCtrl($location, authentication) {
var vm = this;

vm.isLoggedIn = authentication.isLoggedIn();

vm.currentUser = authentication.currentUser();

}

})();

Here is a sample template that utilizes this controller: 

<div class="navbar navbar-default">
<div class="container">
<div id="navbar-main">
  <ul class="nav navbar-nav">
    <li><a href="/">Home</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li ng-hide="navvm.isLoggedIn"><a href="login">Sign in</a></li>
    <li ng-show="navvm.isLoggedIn"><a href="profile">{{ navvm.currentUser.name }}</a></li>
    <li ng-show="navvm.isLoggedIn"><a href="login" onclick="logout()">Logout</a></li>
  </ul>
</div>
</div>
</div>

I have commented inside the HTML where it needs to be.

Thanks in advance

Improve this question
5
  • this isn't the right way to do this at all. you shouldn't call a jquery method like this and supply it with angular values. What does .comments actually do with the object you are passing it, and why couldn't that logic be in angular? Commented Jul 11, 2016 at 17:38
  • also, don't put content inside an element that holds ng-view; the entire contents of that element are replaced by the router, so that script would be removed. It is not recommended to add ng-view to the <body> element for this reason. Commented Jul 11, 2016 at 17:41
  • @Claies is right, you should create AngularJS directive comments and inside that directive you should download comments. There are many material how to display custom HTML with bindings in directive: stackoverflow.com/questions/19845950/… and stackoverflow.com/questions/28170247/… Commented Jul 11, 2016 at 17:45
  • Comments is a JQuery Comments Plugin. I'm just trying to pass the Username to whomever is making the comment. I tried putting that script tag in the Index.HTML and it would not work. So i put in this secondary HTML document where it is actually needed. So I need to create a custom directive? Can i accomplish this without affecting other aspects of my app? Commented Jul 11, 2016 at 17:54
  • Could someone point me to some valid documentation or a great tutorial on how to accomplish? Commented Jul 11, 2016 at 20:37
Related questions
4
Angularjs binding does not work when injecting html
0
Angular js binding with normal html element
1
Pass Angular.js binding to javascript function
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.