0

As a reasonably new developer I don't really have much knowledge when it comes to this. I am attempting to use angularjs inside a in my HTML.

Here is my current code:

<div class="contentContainer" ng-controller="sectionController">
            <div id="sectionContainer" ng-repeat="section in sections">
                <div id="section{{ section.id }}">
                    <h3 class="sectionTitle">{{ section.title }}</h3>
                    <script>
                        $('.link1').click(function(event){
                            $('#section1').scrollView();
                        });

                        $.ajax({
                            url : '../src/text/section1.txt',
                            dataType: 'text',
                            success : function (data) {
                                $('#section1').append(data);
                            },
                        });
                    </script>
                 </div>
            </div>  
        </div>

And I would like it to do something like this:

<div class="contentContainer" ng-controller="sectionController">
            <div id="sectionContainer" ng-repeat="section in sections">
                <div id="section{{ section.id }}">
                    <h3 class="sectionTitle">{{ section.title }}</h3>
                    <script>
                        $('.link{{ section.id }}').click(function(event){
                            $('#section{{ section.id }}').scrollView();
                        });

                        $.ajax({
                            url : '../src/text/section{{ section.id }}.txt',
                            dataType: 'text',
                            success : function (data) {
                                $('#section{{ section.id }}').append(data);
                            },
                        });
                    </script>
                </div>
            </div>  
        </div>

Is this possible or will I just have to copy out the same code for each section of the page.

Thanks in Advance

AidenDawn
  • 5
  • 4
  • try something like $('.link'+{{ section.id }}+').click(function(event){ $('#section'+{{ section.id }}+').scrollView(); }); – Fracedo Oct 18 '15 at 21:02
  • need to use a directive to initialize a jQuery plugin in angular.. As for the ajax, you shouldn't be building the dom yourself, should be letting angular do it for you based on your data model – charlietfl Oct 18 '15 at 21:05
  • first, this is more jquery than angular. second, you should be adding those function calls as services or controller methods; right now, you have as many copies of this script as you have sections, which probably isn't your intent. – Claies Oct 18 '15 at 21:25
  • 1
    Just don't... this is just the wrong way to go about this. Even if you somehow miraculously make this work, you will inevitably run into issues, and no one will be able to help, because what you are doing goes against all good (forget best) practices. Please, [read more](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) about Angular, and for the time being, forget about jQuery. – New Dev Oct 18 '15 at 21:38
  • Are you then suggesting I rewrite all my jQuery code using Angular? – AidenDawn Oct 19 '15 at 14:49

0 Answers0