Why does href not work as desired?

Question

I am using a special Theme in my application that has a chat feature. To open this chat the template uses the following reference href="#offchat-canvas" to an element in my view. This chat is a offcanvas that has the message history. However, this call is made with static elements in the example. When I tried to insert dynamic elements using the ng-repeat href just changes my url url/s#/offcanvas-chat. href with static values opens a offcanvas side without changing the URL.

I’ve tried Sanitize to insert html.

I’ve tried target methods (data-target="_self").

I’ve tried using the ng-href="{{elementId}}" with $scope.elementId = '#offcanvas'

I’ve tried switching to HTML5 mode.

I would like to know if I am forgetting something important. I am new to Angularjs and WEB applications. If you need more details, I can answer.

Edited

Static code:

<li class="tile divider-full-bleed">
  <div class="tile-content">
    <div class="tile-text"><strong>Estático</strong></div>
  </div>
</li>
<li class="tile">
  <a class="tile-content ink-reaction" ng-click="createChat(users[3])" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false">
    <div class="tile-icon">
      <img src="http://acdc.sandro.in/{{users[3].avatar}}" alt="" />
    </div>
    <div class="tile-text">
      Teste Chat Dinâmico {{users[3].nome}}
      <small>123-123-3210</small>
    </div>
  </a>
</li>

Dynamic Code:

<li class="tile divider-full-bleed">
  <div class="tile-content">
    <div class="tile-text"><strong>(NG) {{letter}}</strong></div>
  </div>
</li>
<li class="tile" ng-repeat="user in getUsersByLetter(letter)">
  <a class="tile-content ink-reaction" ng-click="createChat(user)" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false" >
    <div class="tile-icon">
      <img src="http://acdc.sandro.in/{{user.avatar}}" alt="" />
    </div>
    <div class="tile-text">
      (NG) Teste Chat Dinâmico {{user.nome}}
      <small>123-123-3210</small>
    </div>
  </a>
</li>

Answer 1

My friend, most likely your template is checking HTML before Angularjs compiles, that is, I suggest that you put your Chat launcher inside a timeout a few milliseconds to ensure that Angularjs rendered $digest the HTML...

Another way to solve the problem would be to put a call in this plugin whenever the function getUsersByLetter(letter) is invoked... it is not very recommended to make calls from Jquery/Plugins to dentr ode controllers which would lead to Voce creating a directive for this behavior, but to make your solution simpler, do it in the controller itself... for example:

 $scope.getUsersByLetter = function(letter) {
      $timeout(function(){ //refresh no seu plugin da template },100)
 }

Answer 2

From what I understand, you open a single off-canvas for only then popular them. I think your problem is just a matter of order. 'Cause you’re letting him into the ng-repeat, that is, you are creating multiple off-canvas and trying to open with a single call.

See that he’s inside the ng-repeat :

<li class="tile" ng-repeat="user in getUsersByLetter(letter)">
  <a class="tile-content ink-reaction" ng-click="createChat(user)" href="#offcanvas-chat" data-toggle="offcanvas" data-backdrop="false" >
    //... resto do código...

Try to move him out of the ng-repeat and see if it works. Or alternatively, I try to apply a id for each href, sort of like this:

<li class="tile" ng-repeat="user in getUsersByLetter(letter)">
  <a class="tile-content ink-reaction" ng-click="createChat(user)" href="#offcanvas{{user.id}}-chat" data-toggle="offcanvas{{user.id}}" data-backdrop="false" >
    //... resto do código...

The code will depend on how you are handling the canvas, but I think with this you can guide yourself better.