0

I have 2 templates : 

<body ng-app="tutorialWebApp">
    <!--HEADER-->
    <div ng-include='"openclick/templates/header.html"'></div>
    </br></br></br></br></br></br>
    <!--PARTIAL CONTENIDO -->
    <div ng-view></div>
    <!--FOOTER-->
    </br><div ng-include='"openclick/templates/footer.html"'></div>
</body>

i want to execute a jquery action in the ng-view .I have this in my WHEN angular config.

.when("/", {templateUrl: "openclick/partials/home.html", controller: "PageCtrl"})

And in HOME.HTML I have this button : 

     <!--Content angular ng-include-->
 <button id="btn1">Append     text</button>

The jquery script I want to execute is :

     $("button").click(function(){
    $("p").append("<b>Appended text</b>");
});

but It doenst work , it has to be added as this Jquery event .

$(document).on("click", "#btn1", function() {
  $("p").append(" <b>Appended text</b>.");
});

and but I also can do this : appending this to the angular controller.

app.controller('PageCtrl', function () {
$("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });

but im not sure which or if it is the correct uses for integrate jquery with angular template or include?

diego matos - keke
  • 2,099
  • 1
  • 20
  • 11
  • 1
    The most common response to this will likely be... "Don't do that, use angular ngclick!". While it is possible to solve this with jquery, it will be FAR less involved to just use the built-in angular methods to solve this. All you need is a property on the scope to store the text that will be in the `

    ` tag, and a click event bound to a function that changes that value. then you'll just have to output that property into the `

    ` in your template.

     – Kevin B Feb 04 '15 at 19:07
  • write ng-click="click($element)" then declare click function inside a controller that will accept parameter which will be element and play with element..doing dom manipulation inside directive is proper way in angularjs. – Pankaj Parkar Feb 04 '15 at 20:58
  • thank you, but in plugins like scrollit ,mixitup, or carousel. They need a previous configuration like ... " $('.carousel').carousel({ interval: 5000 }); " .. , so where should i put this (in the angular controller or a jq event ?) – diego matos - keke Feb 05 '15 at 03:21
  • 1
    Solved , Put my script in the Angular Controller and works! also this help me to solved the problem of using jquery and angular [why-ng-scope-is-added-to-javascript-inline-of-my-partial-view-and-makes-alert-no](http://stackoverflow.com/questions/19917774/why-ng-scope-is-added-to-javascript-inline-of-my-partial-view-and-makes-alert-no/22476888#22476888) – diego matos - keke Feb 06 '15 at 00:08

0 Answers0