I am experiencing an issue where my 'ng-click' does not work when constructing a tree with ng-include

As I work on constructing a tree structure using the 'ng-include' directive, everything appears to be in order when I refer to the following code:

<script type="text/ng-template" id="tree_node.html">
    <a ng-click="select(this, data, $event)">{{data.name}}</a>
    <ul>
        <li ng-repeat="data in data.children track by $index" ng-include="'tree_node.html'"></li>
    </ul>
</script>
<div>
  <ul>
    <li ng-repeat="data in venueTree track by $index" ng-include="'tree_node.html'"></li>
  </ul>
</div>

The challenge arises when attempting to activate the 'select' function upon clicking on {{data.name}}, as it fails to trigger from my controller. There are no apparent javascript issues or errors popping up either.

Answer №1

To access the parent scope when creating new scopes, you can use $parent or ng-init. For example: Check out this link for more details: http://jsbin.com/xowub/3/edit

Here is an example of how to do it:

<li ng-repeat="data in venueTree track by $index" ng-include="'tree_node.html'" ng-init="parent=this"></li>

And here is the script part:

<script type="text/ng-template" id="tree_node.html">
    <a ng-click="parent.select(this, data, $event)">{{data.name}}</a>
    <ul>
        <li ng-repeat="data in data.children track by $index" ng-include="'tree_node.html'"></li>
    </ul>
</script>

Answer №2

It seems like there might be some confusion surrounding the issue you're facing. The ng-click function appears to be functioning correctly in the following Plunk that I created.

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.venueTree = [{children:[{name:'one'},{name:'dos'}]},{children:[{name:'drei'},{name:'fyra'}]}];
  $scope.select = function(a,b,c){alert(b.name); console.log({a:a, b:b, c:c})};
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The collapse feature in react-bootstrap is malfunctioning

I've been experimenting with the Collapse feature from react-bootstrap in order to implement a collapsible table row. The goal is to have table rows that expand and collapse when clicked, revealing more information specific to that row. While it see ...

What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

Having trouble deactivating date selections in Vue.js Material Datepicker

Can someone assist with the following HTML code: <datepicker :date="child" :option="option" v-model="child.dob" @change="updatechildDOB(child)" :disabled="disabled"></datepicker> Here are the available options: option: { type: 'd ...

No results found: AngularJS typeahead feature does not display search results when there is no match for the inputted text

I'm currently utilizing Angular UI-bootstrap typeahead component. In my HTML file, I have: <input type="text" ng-init="selectedCrossFormFieldText = selectedCrossFormFieldText || {}" ng-model="selectedCrossFormFieldText[fieldId]" ...

What are the reasons behind loading failures and the subsequent failure to resolve promises?

Here is a snippet of code that is part of a larger directive: var imageArray = []; for (var i = 0; i < $scope.abbreviations.length; i++) { imageArray[i] = new Image(); imageArray[i].src = $scope.abbreviations[i].img ...

The issue of flickering during the combination of slideToggle and animate in jQuery

I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div. However, I have encountered an issue where the div below th ...

Choosing specific rows in a kogrid by clicking on a button within a column

My kogrid includes a single column with a view button for each row. I would like to show a popup containing the values of the selected row when the View button is clicked. How can I retrieve the values of the selected row in order to pass them into the p ...

Issue with Material UI Textfield functionality on mobile Safari browser

UPDATE: Resolved the problem by including this code in index.css input { -webkit-user-select:text;} In my application, I am using a Material UI box that contains text fields with an onChange handler. While the TextFields function correctly on most bro ...

step-by-step guide to replacing an item in an array using javascript

I am working with some HTML codes : <p class="Chords">[A] [B] [C]</p> <p> Some Text Goes Here </p> <p class="Chords">[D] [E] [F]</p> <p> Some Text Goes Here </p> <p class="Chords">[G] ...

The scenario of the variable name being included rather than its actual value is occurring within a

Encountering an issue with adding values to a JavaScript object: the value to be added is a key,value pair. Here's a snippet of the problem: //JavaScript object var cart=new Object(); function add() { var rating="1" var category="somecat"; va ...

Vercel offers unique functionality specifically designed for Next.js

As part of my application migration process, I am transitioning to the nextjs framework. I am curious if all the features and functionalities offered by Next.js can be replicated on private Docker servers or other Jamstack platforms, or if there are limi ...

Typing the url in the address bar when using Angular's ui-router

Two distinct states are present: .state('test', { url: '/test', templateUrl: 'js/angular/views/test.html', controller: 'UserController', }) .state('test.list', { url: ' ...

Pushing state history causes browser back and forward button failure

I'm currently utilizing jQuery to dynamically load content within a div container. On the server side, the code is set up to detect if the request is being made through AJAX or GET. In order to ensure that the browser's back and forward buttons ...

Is it possible to accept user input in order to customize the color of my object in Three.js?

// Retrieving the mesh and integrating it into the scene. var loader = new THREE.JSONLoader(); loader.load( "models/cubic.js", function(geometry){ // var material = new THREE.MeshLambertMaterial({color: 0x55B663}); alert(geometry.faces.length); //for ...

Link that is clickable within the tooltip of a Highcharts graph

My tooltips contain a list of data, and I want each data point to be a clickable link that redirects to the page for that specific data. The issue arises with Highcharts tooltip because it changes based on the x-axis, resulting in the tooltip content chang ...

I'm having trouble getting my placeholder to display correctly in react-native-datepicker. What could be the issue?

I'm struggling with displaying a placeholder correctly in the datepicker package I'm utilizing for react native... This is how I've configured the component: The _onDateChange function: const _onDateChange = (startTime) => { pickDa ...

The initial $http POST in Angular ends up hitting the error path within the .then function despite the successful execution of the

Something strange is happening to me. This peculiar behavior occurs only on the initial POST request. However, when I resubmit the form, the subsequent requests work perfectly fine. The first $http post call leads to the error function in .then, even thou ...

on clicking GTM, obtain a different child element

My HTML code is structured as follows: <div onclick="location.href='https://ford-parts-accessories.myshopify.com/products/ash-cup-coin-holder-with-lighter-element?refSrc=6748959244479&amp;nosto=productpage-nosto-1-fallback-nosto-1';&q ...

Difficulty accessing context.params query in Next.js Dynamic Path

I've almost completed setting up a dynamic page in Next.js using getStaticPaths(), but I'm running into an issue with the getStaticProps() function not referencing the URL query correctly to load the relevant information. Here is my code: //Get ...