Массив объектов, не переходящий в свойство Scope директивы

У меня есть контроллер ToolCtrl следующим образом:

function ToolCtrl() {

var vtc = this;
vtc.selectedItem = [ {"id":768,"coOwnerChoruspath":null,"coOwnerLocation":null,"counterPartOwner":"NA","counterPartOwnerEmail":"NA","criticality":"Mandatory","dlinks":[],"edvCategory":null,"filterItems":[{"id":309,"genericFilter":{"id":47,"activeFlag":"tool","description":"Which password policy does it use?","title":"Password Policy used"},"item":"N/A","itemDesc":"Not Applicable"},{"id":315,"genericFilter":{"id":49,"activeFlag":"tool","description":"Which environments does it access?","title":"Environments accessed"},"item":"PPT","itemDesc":"PPT, QAT, STG, AP1, DRPPT"},........];
}

У меня есть директива toolDir с указанным выше контроллером следующим образом:

.directive('toolDir', function(){
return {
    restrict: 'EA',
    transclude: true,

    controller: ToolCtrl,
    controllerAs: '$ctrl',
    scope: {
        selectedItem: '=',
    },
    link: function (scope, element, attrs, ctrl, transclude) {
        var selectedItem = scope.selectedItem;
        transclude(scope, function (clone) {
            element.append(clone);
        });
    }
    }

    });
    })

Я использовал директиву следующим образом:

<html code>
<tool-dir selected-item = "$ctrl.selectedItem">{{$ctrl.selectedItem}}</tool-dir>

Здесь не отображаются данные.

Я ожидаю вывод как:

[ {"id":768,"coOwnerChoruspath":null,"coOwnerLocation":null,"counterPartOwner":"NA","counterPartOwnerEmail":"NA","criticality":"Mandatory","dlinks":[],"edvCategory":null,"filterItems":[{"id":309,"genericFilter":{"id":47,"activeFlag":"tool","description":"Which password policy does it use?","title":"Password Policy used"},"item":"N/A","itemDesc":"Not Applicable"},{"id":315,"genericFilter":{"id":49,"activeFlag":"tool","description":"Which environments does it access?","title":"Environments accessed"},"item":"PPT","itemDesc":"PPT, QAT, STG, AP1, DRPPT"},]

Создайте работающую демонстрацию, которая воспроизводит проблему

— 07.04.2019 17:27

angularjs angularjs-directive

07.04.2019 17:15

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пожалуйста, посмотрите на этот рабочий пример. Это рабочий пример того, что вы пытаетесь сделать.

Я копирую/вставляю ваш код, кажется, вы не написали контроллер.

function ToolCtrl($scope) {
   this.selectedItem = $scope.selectedItem;
}

07.04.2019 19:36

Ответ принят как подходящий

Ваш код кажется идеальным. Я воспроизвел ваш код на своей машине, и он работает так, как вы ожидаете. Если это не работает на вашем компьютере, попробуйте создать функцию ToolCtrl внутри области действия директивы. (Я предполагаю, что имя вашего приложения — «angularApp»);

Что-то вроде этого :

angularApp.directive('toolDir', function(){

  function ToolCtrl(){
    var vtc = this;
    vtc.selectedItem = [{key1:'value1'},{key2:'value2'}];
  }

  return {
      restrict: 'EA',
      transclude: true,  
      controller:ToolCtrl,
      controllerAs: '$ctrl',
      scope: {
          selectedItem: '=',
      },
      link: function (scope, element, attrs, ctrl, transclude) {
          var selectedItem = scope.selectedItem;
          transclude(scope, function (clone) {
              element.append(clone);
          });
      }
      }
});

Надеюсь, это поможет!

07.04.2019 20:39