it-swarm.com.ru

Директивные контроллеры AngularJS, требующие родительских контроллеров директив?

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

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

Я могу требовать родительские компоненты в ссылке виджета fn, используя require: "^component", но как мне дополнительно предоставить контроллеру компонентов доступ к содержащему его экрану? 

Что мне нужно, это то, что в компоненте, поэтому, когда вы нажимаете кнопку виджета, он предупреждает «экран!».

Благодарю.

30
nicholas

Вот два способа решить вашу проблему:

  1. Поскольку вы используете scope: true, все области являются прототипами наследования. Так что если вы определяете свои методы для $scope вместо this в контроллере screen, то и component, и widget будут иметь доступ к функции doSomethingScreeny.
    Fiddle .
  2. Определите функцию связи для component и require: '^screen'. В функции ссылки сохраните screenCtrl в свойстве области, затем вы можете получить к нему доступ в контроллере директивы (inject $scope) .
    Fiddle .
35
Mark Rajcok

Большинство этих вещей завершается неудачно, когда вы хотите получить прямой доступ к свойствам или методам из родительского контроллера при создании контроллера. Я нашел другое решение, используя внедрение зависимостей и службу $controller.

.directive('screen', function ($controller) {
    return {
       require: '^parent',
       scope: {},
       link: function (scope, element, attr, controller) {
           $controller('MyCtrl', {
                $scope: scope,
                $element: element,
                $attr, attr, 
                controller: controller
           });
       }
    }
})

.controller('MyCtrl, function ($scope, $element, $attr, controller) {});

Этот метод лучше тестируем и не загрязняет вашу область с нежелательными контроллерами.

5
malte

var myApp = angular.module('myApp', [])

.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
      this.doSomethingScreeny = function() {
        alert("screeny!");
      }
    }
  }
})

.directive('component', function() {
  return {
    scope: true,
    controller: function($element) {
      this.componentFunction = function() {
        $element.controller('screen').doSomethingScreeny();
      }
    }
  }
})

.directive('widget', function() {
  return {
    scope: true,
    controller: function($scope, $element) {
      $scope.widgetFunction = function() {
        $element.controller('component').componentFunction();
      }
    }
  }
})

.controller('MyCtrl', function($scope) {
  $scope.name = 'Superhero';
})
<body ng-app="myApp">

  <div ng-controller="MyCtrl">
    <div screen>
      <div component>
        <div widget>
          <button ng-click="widgetFunction()">Woo Hoo</button>
        </div>
      </div>
    </div>
  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

Если вы хотите получить доступ к функции, определенной в контроллере директив screen из контроллера директив component (не функции связи), вы можете использовать $element.controller('screen').doSomethingScreeny() (из директивы component).

JSFiddle

Угловая документация :

  • controller(name) - извлекает контроллер текущего элемента или его родитель. По умолчанию извлекает контроллер, связанный с ngController директива. Если name предоставляется как директива camelCase name, тогда будет извлечен контроллер для этой директивы (например, 'ngModel').
0
Felix

return {scope: true} или return {scope: false} не влияет на переменную $ scope в controller: function ($ scope) {} в каждой директиве, но тег директивы должен быть вставлен в тег ng-controller или ng-app ,.

JSFiddle

JSFiddle

0
Lighthouse Nguyen