Related questions

AngularJS directive with isolate scope, ng-repeat, and controllerAs

2018-11-08 08:10 Zack imported from Stackoverflow 

function directive() {
  return {
    restrict: 'E',
    template: '<button ng-repeat="x in j.array" ng-click="j.set(x)">{{x}}</button>',
    replace: true,
    //scope: {},
    bindToController: {
      array: '=',
      answer: '='
    },
    controller: function() {
      var j = this;
      j.set = function(data) {
        j.answer = data;
      };
    },
    controllerAs: 'j'
  };
}

When I uncomment scope and create an isolate scope the directive no longer works. I'm trying to determine why.
Normally I still have access to the controllerAs in an ng-repeat, in this example when I lose it it's still available on $parent.j. I think there are 3 solutions.

Solution 1 is to leave it not in isolate scope.
Solution 2 would be to convert every reference to j inside the repeat to $parent.j.
Solution 3 is that there is some way to use j without having to use $parent that I'm unaware of.

1 answer

  • answered 2018-11-08 10:08 Sophie

    It may be to do with the replace: true. If you wrap the button in a div, it seems to work! I've made a little Plunker here to demonstrate.

See also questions close to this topic

  • AngularJS $localstorage not working in other tab

    I am trying to execute a fuction when a change occurs in one tab, the change should reflect in other tab too.

    i write this and it is working fine in the same tab i change even i check manually browser localstorage and see it works nice.

    but the problem, the change not reflect in other tab too.

    I mean, i opened two tab and when i change something in one tab, in other tab it should reflect.

    Whenever any change occurs in one tab, 2nd tab should execute this $scope.getAllContact(); and wait for another change, if another change occurs, $scope.getAllContact(); should be executed.

    $localStorage.editedData = response.data;
      $scope.editedID = $localStorage.editedData.id;
      if (response.data.id == $localStorage.editedData.id) {
        $localStorage.isChanged = true;
      }

      while ($localStorage.isChanged == true) {
        $scope.getAllContact();
        break        
      }

    I write above code;

    Ignore below this code if you undertand above few line, below code is fuction, when change occurs, the fuction should be executed:

    $scope.getAllContact = function() {
    var data = $http.get("http://127.0.0.1:8000/api/v1/contact")
    .then(function(response) {
      $scope.contacts = response.data;
      // below two line of codes will reload in every 10 millisecond if a request succcess
      // in result, you will see refleation in other browser if any change occurs in another browser
      // do nothing for now
    }, function(response) {
      //$scope.connectionError = "Opps ! Having Trouble in loading this page ! \n  It's Connection Error !!!";
      // below two line as as above two commented line
      // do nothing for nw
    });
  };
  $scope.getAllContact();
  • Issues displaying multiple data points on tabs in AngularJS

    I'm pretty new to AngularJS, so looking for some guidance for a problem that I'm having; I have a JSON file store which I'm successfully reading data from, which is in the form:

    {
"sites": [
    {
        "name": "S001",
        "description": "Joes's 1"
    },
    {
        "name": "S002",
        "description": "Fred"
    },
    {
        "name": "S003",
        "description": "John"
    },
... etc ...
    {
        "name": "S020",
        "description": "Mary"
    }
]

    }

    I'm trying to use the md-tabs directive to loop through this, displaying 10 items at a time within a single tab; I've got it working for each item using the code below (sorry for the messy workings):

        <md-tabs md-selected="selectedIndex"  style="border: 1px solid red; background-color: white; color: black;">
      <md-tab ng-repeat="site in sites.sites" md-on-select="onTabSelected(tab)">
        <md-tab-label>
          Tab {{ site.name }}
        </md-tab-label>
        <md-tab-body>
          {{ site.description }}
          <p>Length of Array: {{sites.sites.length}}</p>
          <p>Pages: {{ sites.sites.length / pageSize }} - ({{ currentPage }} of {{((4.9 + sites.sites.length) / pageSize | number:0)*1 }})</p>
        </md-tab-body>
      </md-tab>
    </md-tabs>

    But I'm struggling to find how to make the tabs read "Tab1", "Tab2" and display only 10 pieces of information per page - is this possible using tabs, or am I barking up the wrong tree?

    With thanks.

  • $state.go inside .then() happens before request completes

    I have an issue which I have been unable to tackle, seeing if anyone has an idea. I have a method on a controller that once invoked, retrieves some data from a service, that service returns a promise. and with the results of the promise, I do a $state.go().

    What happens is that the transition seems to cancel the 'POST' request.

    This is a snippet of my code:

        myService.myMethod().then(function (data) {
      $state.go(data.state);
    });

    I have found a workaround using a timeout function, but there must be a better way to do this since this solution is very hacky.

          setTimeout(() => {
         return $state.go(data.state);
      }, 1000);
  • how to add `required` attribute to angularjs directive

    I defined simple directive as you can see below:

    (function () {
    'use strict';

    angular
        .module('myApp')
        .directive('biSelect', biSelect);

    function biSelect($compile) {
        var directive = {
            restrict: 'E',
            templateUrl: 'bi-select.html',
            scope: {
                required: '=?required'
            },
            controller: BiSelectController,
            controllerAs: 'vm'
        };

        return directive;
    }

    function BiSelectController() {
        var vm = this;
    }
})();

    and this is directive template:

    <select class="form-control">
    <option value=""></option>
</select>

    now i want to add required attribute to select in directive when it was passed to directive, for example:

    <bi-select required></bi-select>

    how can i do that?

  • Match variable passed to directive dynamically

    I've created a directive for an HTML image which allows me to store URLs and alt tags for images I use a lot, so I only have to give it a specific value via its data field (data-type in the code) and it gets replaced by an image with corresponding URL and alt tag. I'm doing this so I don't have to write out the tags all of the time and can change it at one place in the code.

    So far it works great as long as I pass the value as a string. But for the directive to be really useful I need it to also work with passing the value as a variable (eg inside ng-repeat).

    Here is my setup:

    Directive - builds img based on a passed variable named type:

    app.directive('tsTypeImage', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            type: '='
        },
        template:'<img src="{{ type.imgURL }}" alt="{{ type.name }}">'
    };
});

    Controller:

    app.controller("ctrl", function($scope) {

    $scope.fire = { name: "Fire", imgURL: "/images/fire.png" };
    $scope.water = { name: "Water", imgURL: "/images/water.png" };
    $scope.lightning = { name: "Lightning", imgURL: "/images/lightning.png" };

});

    HTML:

    <body ng-app="tcgApp" ng-controller="ctrl" ng-init="type='fire'">

    <!-- this works -->
    <ts-type-image data-type="fire"></ts-type-image>

    <!-- this does not work -->
    <ts-type-image data-type="{{ type }}"></ts-type-image>

</body>

    I already tried a lot of stuff with interpolate or parse but wasn't successful. This is my first AngularJS project so maybe I'm even running into the wrong direction and there is a much simpler way to achieve this. If so, please tell me :)

  • How to change templateUrl in angularjs route dynamically

    I have a simple PHP and AngularJS page that I'm trying to change the specified templateUrl based on my PHP login function. For instance by default my route looks like this for the main page (before a successful login)

     .state('index', {
        abstract: true,
        url: "/index",
        templateUrl: "views/common/content.html",
 })

    The content.html file looks something like this:

    <div id="wrapper">

<!-- Page wraper -->
<div class="gray-bg">

    <!-- Page wrapper -->
    <div ng-include="'views/common/topnavbar.html'"></div>

    <!-- Main view  -->
    <div ui-view></div>

    <!-- Footer -->
    <div ng-include="'views/common/footer.html'"></div>

</div>
<!-- End page wrapper-->

    After a successful login I want to replace the templateUrl for index to be content_user.html that looks something like this:

    <div id="wrapper">

<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>

<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">

    <!-- Page wrapper -->
    <div ng-include="'views/common/topnavbar.html'"></div>

    <!-- Main view  -->
    <div ui-view></div>

    <!-- Footer -->
    <div ng-include="'views/common/footer.html'"></div>

</div>
<!-- End page wrapper-->

    After I get a valid response from my user login (code below) I'd like to replace the templateUrl...Is this possible?

        var params = {
        f: 'loginuser',
        data: $('#loginForm').serialize()
    };

    $http.post('server/functions/profile.functions.php', {f: 'login', params: params}).then(function (response) {

        if (response.data.success) {

        ** Is it possible to update the templateUrl at this point before I redirect?**

            $state.go("index.main");
        }
        else {
            $scope.login_errors = response.data.error;
        }
    });