There is an application on angular, tabs. When creating a new tab tabs I pass through the directive content template

return { restrict : 'E', templateUrl : 'tab-content.html' }

If I add students to the content, then when adding the following tab, students are saved, is it possible to transfer the original templateUrl : 'tab-content.html' when creating a new tab templateUrl : 'tab-content.html' ? I tried to isolate the scop - scope : {} , but then my template is not transmitted at all.

An example .

  • Simplify an example. - Qwertiy ♦
  • @Qwertiy has simplified a little, in order not to lose the essence, tab-content.html does not carry a semantic load, there is just content that will fill the tabs. In js I think the whole thing is in the directive, I think even in scope, because the data from it pulls, but what exactly I can’t understand - Peter

1 answer 1

The main problem is that there is no tab separation.

If you look at the code:

  1. $ scope.students is common to all, incomprehensible. Should this list be shared? or be your own each tab
  2. gradeName - displayed in the tab header and filled in the template, common to all.
  3. $ scope.selectedGrade - not used anywhere, in fact, assigned for the sake of assignment.

There may be several solutions, in my opinion, the simplest would be to create a variable that stores information about the current tab, and when changing the tab, change this variable.
Now its counterpart executes $scope.selectedGrade , if you use it wherever you need specific tab data. then there would be no problem.

An example of saving the selected object:

 var app = angular.module('App', []); app.controller('appCtrl', ['$scope', function($scope) { $scope.addStudent = function() { $scope.selectedGrade.students.push({ name: $scope.newName, gpa: $scope.newGpa }); $scope.newName = ''; $scope.newGpa = ''; }; // operations with tabs var addNewGrade = function() { var id = $scope.grades.length + 1; $scope.selectedGrade = { id: id, name: "Grade " + id, active: true, students: [] }; $scope.grades.push($scope.selectedGrade); }; $scope.grades = [{ id: 1, name: "Grade 8A", active: true, students: [{ name: 'Vasya Pupkin', gpa: '4.8' }, { name: 'Petia Vasechkin', gpa: '3.2' }] }]; $scope.addGrade = function() { addNewGrade(); }; $scope.selectedGrade = $scope.grades[0]; $scope.selectGrade = function(grade) { $scope.selectedGrade = grade; } } ]); app.directive('newGrades', function() { return { restrict: 'E', templateUrl: 'tab-content.html' } }) 
 .btn-xs { margin-top: 10px; margin-left: 10px; width: 23px; } .tab-content { margin-top: 20px; margin-left: 10px; } .tab-content input { margin-left: 20px; } .remove:hover { color: red; cursor: pointer; } .tab-content .add input { margin: 0; width: 120px; } .tab-content .add .gpa-width { width: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <div ng-app="App" ng-controller="appCtrl"> <div class="container"> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <ul class="nav nav-tabs"> <li class="active" ng-repeat="grade in grades" ng-click="selectGrade(grade)" ng-class="{'active':selectedGrade == grade}"> <a data-toggle="tab" href="#{{grade.id}}">{{grade.name}} <span class="remove" ng-click="deleteGrade($index)"> x</span> </a> </li> <a href="#" class="btn btn-danger btn-xs" ng-click="addGrade()">+</a> </ul> <new-grades></new-grades> </div> </div> </div> <script type="text/ng-template" id="tab-content.html"> <div class="tab-content"> <div id="{{selectedGrade.id}}" class="tab-panel"> <div class="container"> <div class="row"> <div class="col-xs-3"> <label for="grade">GRADE</label> <input type="text" id="grade" ng-model="selectedGrade.name"> </div> </div> <br> <div class="row"> <div class="col-xs-2"> <h4>NAME</h4> </div> <div class="col-xs-offset-3"> <h4>GPA</h4> </div> </div> <div class="row"> <div class="col-xs-4"> <hr> </div> </div> <div class="row" ng-repeat="student in selectedGrade.students"> <div class="col-xs-3"> <h4>{{student.name}}</h4> </div> <div class="col-xs-1"> <h4>{{student.gpa}}</h4> </div> <div class="col-xs-2"> <span class="remove" ng-click="removeItem(student)">x</span> </div> </div> <div class="row"> <div class="col-xs-4"> <hr> </div> </div> <div class="row add"> <form class="form-inline ng-valid ng-dirty ng-submitted" ng-submit="addStudent()"> <div class="col-xs-2"> <input type="text" ng-model="newName" required> </div> <div class="col-xs-1 col-xs-offset-1"> <input class="gpa-width" type="text" ng-model="newGpa" required> </div> <div class="col-xs-2"> <button type="submit" class="btn btn-success btn-sm">add</button> </div> </form> </div> </div> </div> </div> </script> </div>

  • Thanks for such a detailed clarification! Now I see my mistake. therefore, the binding did not help, and it was senseless here. - Peter