Podobnie jak tytuł mówi, że próbuję dokonać dyrektywy atrybutu, która owija jego rodzic i pozwala mi przełączać między edycją i pokazującą rzeczywistą wartość modelu ..

W skrócie:

<input ng-model="model" allow-edit="editing" />

Skończy się jak:

<div>
    <div ng-hide="editing">{{model}}</div>
    <input ng-show="editing" ng-model="model"></input>
</div>

Jeśli wszystko poszło dobrze.

Jednak przytrzymuję coś więcej wzdłuż linii:

<input ng-model="model">
    <!-- html from allow-edit directive's template --!>
</input>

Użyłem tutaj przykładu, ale chciałbym być w stanie owinąć dowolną zawartość (wybierz itp.) Jak również ...

Czy ktoś był w stanie dokonać dyrektywy, która otacza inną treść na tym samym elemencie? Czy jest lepszy sposób, aby to zrobić, że nie rozważam?

Dzięki za pomoc!

2
user3505342 14 sierpień 2014, 00:50

3 odpowiedzi

Najlepsza odpowiedź

Co chcesz zrobić, to replace:true, ale utrzymuj "=ngModel"

replace:true,
scope:{
  mymodel:"=ngModel",
  editing:"=allowEdit"
}

Heres a PLunker

1
Dylan 13 sierpień 2014, 21:37

Mam nadzieję, że to odpowiada na twoje pytanie:
W opcjach dyrektywy:

  1. Ustaw replace: true
  2. Ustaw transclude: "element"
  3. Użyj ng-transclude, gdzie kiedykolwiek chcesz umieścić oryginalny element w szablonie opakowania.

link PLunker

Przykład:

Js:

var app = angular.module("test", []);

app.directive("myCustomInput", function($rootScope){
  return{
    restrict: "A",
    replace: true,
    transclude: "element",
    template: "<div class='input-wrap'>"+
    "<div ng-transclude></div>"+
    "<i class='glyphicon glyphicon-chevron-down'></i>"+
    "</div>"

  }
});

HTML:

<input my-custom-input type="text" />
2
Community 20 czerwiec 2020, 09:12

Myślę, że użycie replace : true powinno umożliwić wymianę oryginalnej zawartości. Spójrz na tę odpowiedź stackoverflow: Oto

Jeśli miałeś nieco więcej dyrektywy, mogłem iść na zdobycie go do pracy, ale miejmy nadzieję, że możesz użyć KRKR drugiej odpowiedzi, aby go wypracować.

0
Community 23 maj 2017, 12:14