Angular js plunkr не работает при доступе через iframe

Question

Я не могу получить доступ к модели для модели ниже plunkr, пожалуйста, найдите plunkr ниже. Пожалуйста, помогите.

<div ng-controller="PersonCtrl">
  <h2>Teens - using external HTML file as template</h2>
  <iframe src="teen-external.html"></iframe>
</div>

Вот Plunkr для любого реф.

Answer 1

У вас есть пара проблем в вашем примере, во-первых, источник html был загружен в iframe, который загружает его как простой html и отображает его внутри iframe без углового анализа для выполнения всей интерполяции мастаха.

Чтобы исправить это, так как вы уже создали директиву, которая отображает teen-external.html, которая позволит angular анализировать указанный HTML и интерполировать соответствующие поля. Для этого просто используйте директиву внутри вашего index.html файла, например.

<teen-internal> </teen-internal>

или

<div teen-internal></div>

Другая проблема заключается в том, что вы пытаетесь получить доступ к переменной / модели, определенной внутри родителей $scope, что невозможно без использования $scope.$parent. Даже если вы делаете это с помощью $parent, это считается очень плохой практикой. Для этого немного более элегантно угловатое обеспечивает своего рода модель / переменную, передаваемую от родителя к потомку, для этого вам нужно изменить как директиву index.html, так и код директивы teensInternal.

в вашем index.html или

<div teens-internal teens="teens"></div>

Устанавливает свойство teens для teensInternal $scope равным teens от родительского (PersonCtrl) $scope. Теперь в вашем директивном коде вы должны определить, как работает привязка для свойства teens, здесь вы можете определить его как доступное только для чтения @, также называемое односторонним связыванием (изменение, выполненное внутри teensInternal, не отражается внутри родительского контроллера) или как доступное для записи = двустороннее связывание (оба teensInternal и PersonCtrl совместно используют один и тот же объект, поэтому изменения отражаются в обе стороны) для внесения этого изменения

scope: {

},

до

scope: {
  teens: '=' // or "@" for one way binding
},  

Это говорит директиве, что все, что было передано в <teens-internal teens="teens"></teens-internal> через teens="<model's name>", может использоваться внутри директивы $scope.

Plunkr: источник plunkr