добавить пользовательскую директиву от контроллера

Question

добавить пользовательскую директиву от контроллера

0

Я знаю, что Контроллер не должен добавлять HTML, а это директивные задания. К сожалению, я не могу сейчас это сделать.

Вот что я делаю. submit() - это вызов из шаблона, мне стыдно, потому что я знаю, что сделал это неправильно:

/*in my Controller */       

    $scope.widget = widget;
    $scope.ContentList =['array','graph','nevermind']
    $scope.form = {
        name: widget.name,
        id: widget.id,
        content: widget.content
    };

 $scope.submit = function() {
    angular.extend(widget, $scope.form);
    $modalInstance.close(widget);

    $timeout(function(){$scope.ajouterDirective();},100); //THIS SUCK HARD !
};

$scope.ajouterDirective = function(){
    var idWid = $scope.widget.id;
    var directive = getDirectiveHtmlCode($scope.widget.content); // return sth like '<my-custom-directive></my-custom-directive>'
    var compiled = $compile(directive)($scope);
    $('#widget'+idWid).append(compiled); // this suck two
}

Может кто-нибудь сказать мне/дать ссылку, которая объясняет, как это сделать правильно PLZ?

спасибо

--- Edit-- Шаблон формы (очень упрощенный)

<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
 Name: <input name="name" type="text" ng-model="form.name" class="form-control" />
Content : <select name="content" ng-model="form.content" class="form-control">
<option ng-repeat="value in ContentList" value="{{value}}">{{value}}</option>
</select>
</form>

ssbb 26 июнь 2015, в 16:33

Источник

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Okazari · Accepted Answer · 2015-06-26T12-47-00.000Z

Я бы пошел на что-то вроде этого:

HTML:

  <input type="text" ng-model="widgetCustomName">
  <select ng-model="widgetName" ng-options="widget.directiveName as widget.name for widget in widgets">
  </select>
  <button ng-click="addWidget()">Add directive</button>

  <!--  I'll repeat for each widgets placed by the user  -->
  <div ng-repeat="widget in placedWidgets">
    <h2>{{widget.customName}}</h2>
    <!--  here i'll use the directive according to the widget technical name -->
    <div ng-switch on="widget.widget">
      <mywidget1 ng-switch-when="mywidget1">Widget1</mywidget1>
      <mywidget2 ng-switch-when="mywidget2">Widget2</mywidget2>
      <div ng-switch-default>Crap you didn't select a widget</div>
    </div>
  </div>

Контроллер:

//We will look through this collection to display our widgets
$scope.placedWidgets = [];
//We define here the widgets availables in the select. name is a display name and directiveName the name of the associated directive.
$scope.widgets = [{
  "name" : "Widget1",
  "directiveName" : "mywidget1"
},{
  "name" : "Widget2",
  "directiveName" : "mywidget2"
}]

//This will be the function adding a widget in the collection according to the user inputs.
$scope.addWidget = function(){
  $scope.placedWidgets.push({
    "customName":$scope.widgetCustomName,
    "widget":$scope.widgetName
  })
}

Вот связанный плункер. Я надеюсь, что комментариев будет достаточно, как объяснение, но если вам нужна дополнительная информация, просто не стесняйтесь спрашивать.

Это выглядит красиво. Thinqs для опции ng на селекторе и переключателе ng. Интересно: как он понимает, что <mywidget1> похож на <p>? Просто поведение браузера по умолчанию / угловое поведение по умолчанию?
@ssbb На самом деле брат думает, что «<mywidget1>» не является допустимым тегом HTML. Тогда он просто не будет делать ничего особенного. Текст просто отображается, так как вы можете разместить текст везде (не только в <p>). Если ваше угловое приложение имеет директиву mywidget1, оно заменит (или нет, в зависимости от определения вашей директивы) этот тег на содержимое виджета.