1

I have this page:

<!DOCTYPE html>
<html>
    <body ng-app='vb'>
        <div id="loadedContent" ng-controller="ExampleController"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('vb', ['ngRoute']);
            angular.module('vb', []).controller('ExampleController', ['$scope', function($scope) {}]);    

            jQuery(function () {
                jQuery.get('vb.txt', {
                    now: jQuery.now()
                }, function (data) {
                    $("#loadedContent").append(data);
                });
            });
        </script>
    </body>
</html>

Plunker

What the page does is to load a text file which contains: {{10*10}} and places it in the loadedContent div tag but the Angular JS code is not compiled. I am very new to Angular JS. I have read on the documentation and tried out ng-bind, ng-include, compile directive but none seems to work. What is the way to go about this?

Improve this question

3 Answers 3

Reset to default
3

You shouldn't need to use jquery at all to do this.

If you would like to load the data from an external file, then you can use the ng-include directive to load external html.

<ng-include src="'vb.html'"></ng-include>

or using the attribute syntax (incase you are targeting a browser which cannot handle custom elements)

<div ng-include="'vb.html'"></div>

will load the file where you place it. Notice the extra quotes inside the src attribute, which are required. Otherwise, you could directly place your binding ({{10*10}}) inside your controller element, and it will compile. You could also set a variable to $scope inside your controller function and use that:

$scope.ten = 10;

with

{{ten*ten}}

inside the controller element.

I would advise reading through the angular tutorial before starting, however, as it is a great place to begin with angular.

As to why your example is not working, I would think it is because of angular's compile phase beginning and completing before jQuery adds the text to the page. Angular doesn't mix all that well with things outside of its control, but it does contain everything you need to create a complete web application.

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

5 Comments

I am using jQuery because I need to replace some strings in the vb.txt file before I append it. I have lines like: <input type="text" name="last_name_namefieldid" ng-model="last_name_namefieldid" /><br /> {{40 - last_name_namefieldid.length}} where I have to replace namefieldid which is generated before I append the contents of vb.txt
If you can determine the value of namefieldid in your controller, apply it to scope $scope.nameFieldId = yourValue then you can use {{nameFieldId}} pretty much anywhere in your html (except certain ng-bindings). You can even use {{::nameFieldId}} with two colons for a single time binding. You can also use more advanced directives to create html and connect it to your DOM using $compile. The angular directive guide is a great place to see how to do that.
I have tried to implement your suggestion but it seems not to be compiling. plnkr.co/edit/kmkCKliIsSDrk6bNxCQ6?p=preview
Sorry, I wasn't very clear, nor was I understanding your problem correctly! Why exactly do you need to have an arbitrary variable name? If you want to include multiple instances of the element you can rg-repeat. The variable name itself doesn't really matter, after all.
I have an arbitrary variable name because I am using the vb.txt to add more than one input text field. I want each input field to have a different name and also be able to limit count how many characters are remaining as the user types in those input fields.
1

Normally any DOM manipulation code would be put in a directive. However directives also have built in methods to retrieve templates which will also automatically be compiled.

While I agree with @CoreyGrant that ng-include is ideal for your use case, creating a directive is quite simple also

Example to make your file load:

angular.module('vb').directive('myText', function(){
  return{
    templateUrl:'vb.txt'
  }
});

HTML

<my-text></my-text>

If you are going to work with angular you will need to learn about the power of directives

DEMO

Improve this answer

Comments

-1 

<script type="text/javascript">

var app = angular.module('vb', ['ngRoute']);
angular.module('vb', []).controller('ExampleController', ['$scope', function($scope) {

   $scope.myData;

   jQuery.get('vb.txt', {
            now: jQuery.now()
         }, function (data) {
            $scope.myData = data;
         });

}]);

</script>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.