Why does href not work as intended?

Question

Why does href not work as intended?

Navigation

#1 by (2 votes)
#2 by (1 votes)

6

I'm using a special theme in my application that has a chat feature. To open this chat the template uses the following href="#offchat-canvas" reference for an element of my view. This chat is an 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 ng-repeat href just changes my url url/s#/offcanvas-chat . Href with static values opens a offcanvas side without changing the URL.

I have already tried the sanitize to insert the html.

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

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

I've tried to change to HTML5 mode.

I wonder if I'm forgetting something important. I'm new to angularJS and WEB applications. If you need more details, I can respond.

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>

angularjs ng-repeat

asked by anonymous 23.12.2015 / 14:47

2 answers

1

As I understand it, you open a single off-canvas to just after they pop it. I think your problem is just a matter of order. Because you are leaving it within ng-repeat , that is, you are creating multiple off-canvas and trying to open with a single call.

See that it is within 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 moving it out of ng-repeat and see if it works. Or alternatively, I try to apply id to every href , 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 manipulating canvas , but I think that you can better guide yourself.

23.12.2015 / 18:41

CDI @Inject Named bean in another Named bean Different session in browser tabs

score 2 · Accepted Answer

My Friend, most likely your template is checking the HTML before AngularJS compile, ie I suggest you put the initializer of your Chat within a% of a few milliseconds that ensures that AngularJS rendered timeout or HTML ...

Another way to solve the problem would be to put a call in this plugin whenever the $digest function is invoked ... it is not very recommended to make calls to Jquery / Plugins from within the controllers which would lead you to create a directive for this behavior, but to make your solution simpler, do this in the same controller ... eg:

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