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

Grant Campbell
  • 143
  • 2
  • 12
  • 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? – Claies Jul 11 '16 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 `` element for this reason. – Claies Jul 11 '16 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: http://stackoverflow.com/questions/19845950/angularjs-how-to-dynamically-add-html-and-bind-to-controller and http://stackoverflow.com/questions/28170247/parse-html-fragment-with-angularjs – csharpfolk Jul 11 '16 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? – Grant Campbell Jul 11 '16 at 17:54
  • Could someone point me to some valid documentation or a great tutorial on how to accomplish? – Grant Campbell Jul 11 '16 at 20:37

0 Answers0