Пользовательское отображение области углового фрагмента

Мой разум все еще находится в мире WPF, и я вхожу в Angular.JS, который предоставляет несколько аналогий. Однако я не могу понять, как (если возможно) «переназначить» объем фрагмента, чтобы лучше использовать шаблоны.Пользовательское отображение области углового фрагмента

Рассмотрим следующий пример:

<html ng-app="myApp"> 
    <body> 
    <div id="container" ng-controller="ContentCtrl"> 
     <div ng-repeat="item in content"> 
      <a href='#' ng-click="select(item)">{{item.title}}</a> 
     </div> 
     <hr> 

     <!-- here is the target fragment --> 
     <div ng-whatever="??? func(selected)"> 
      <h1>{{title}}</h1> 
      <div ng-include="mapper($scope)"></div> 
     </div> 

    </div> 

    <script type="text/ng-template" id="entry-photo"> 
     <div> 
      <span><a href="{{data}}"><img ng-src="{{data}}"></a></span> 
     </div> 
    </script> 

    <script type="text/ng-template" id="entry-video"> 
     <div> 
      <iframe ng-src="{{data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </div> 
    </script> 

    <script type="text/ng-template" id="entry-notes"> 
     <div>{{data}}</div> 
    </script> 
    </body> 
    </html>

и связанный с ним сценарий:

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

function ContentCtrl($scope) { 
    $scope.selected = null; 
    $scope.content = [ 
     {"content_type" : "image", "title" : "Image 00", "data" : "http://www.letsgodigital.org/html/review/panasonic/lumix-dmc-fx33/photography/panasonic-fx33_small8.jpg"}, 
     {"content_type" : "video", "title" : "Video 00", "data" : "http://player.vimeo.com/video/37176398"}, 
     {"content_type" : "notes", "title" : "Notes 00", "data" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar pretium felis. Vivamus nibh felis, condimentum sit amet laoreet luctus, posuere auctor lorem. Nullam malesuada."} 
    ]; 

    $scope.select = function(e){ 
     $scope.selected = e; 
    }; 

    $scope.mapper = function(e){ 
     switch(e.content_type){ 
      case "image": return "entry-photo"; 
      case "video": return "entry-video"; 
      case "notes": return "entry-notes"; 
     } 
    }; 
}

Конечно выше разметки НЕ работает, очевидно, потому, что изображено, как псевдо-код:

 <div ng-whatever="??? func(selected)"> 
      <h1>{{title}}</h1> 
      <div ng-include="mapper($scope)"></div> 
     </div>

Я хотел бы создать «пользовательский объем», (получена из исходной), так что любой нисходящий узел наследует измененное значение. В этом примере функция может быть просто значением свойства «selected».

Есть ли простой способ достичь этого?

Предположим, что мне больше интересно учиться, а не к любому совершенно другому обходу. Поскольку в WPF подобные ситуации очень распространены, но их просто решить, мне интересно, как это сделать в Angular.

источник

2015-01-22 Mario Vernari

Если я четко понял, что вы хотите, вы можете просто объявить другого контроллера и создать новую область. Из области детства вы можете получить значение из родительской области с объектом $scope.$parent.

Подробнее о AngularJS прицелы вы найдете здесь https://docs.angularjs.org/guide/scope

Это мой простой пример.

<div ng-controller="ParentCtrl"> 
    {{name}} 
    <div ng-controller="NestedCtrl"> 
     {{title}} 
     <br/> 
     {{$parent.name}} 
    </div> 
</div> 

function ParentCtrl($scope) { 
    $scope.name = 'Parent'; 
} 

function NestedCtrl($scope) { 
    $scope.title = 'Nested'; 
}

Это JSFiddle для вас.

источник

2015-01-22 09:55:52

Я боялась, что мой пример не лучший, и то есть ... Моя цель - определить «компоненты» над «интерфейсом». Если я использую $ parent с компонентом, он будет знать, где находится. Попытайтесь считать внутренний div вашего фрагмента фрагментом, который можно использовать где-то в другом месте, так как в $ scope раскрываются свойства. –

@MarioVernari, вы хотите использовать этот компонент в любом месте только как шаблон html, или хотите также использовать данные родительской области? –

мой реальный случай не прост, как указано выше. Шаблоны - это файлы (представления), вытащенные с сервера и используемые одним или несколькими способами на веб-странице. Если вам нравится, подумайте о шаблоне как о «фрейме», где вызывающий абонент предоставляет только URI. В содержимом фрейма нет ничего о нем: визуальный/логический родитель ... –

Прежде всего, ваш код

$scope.mapper = function(e){ 
    switch(e.content_type){ 
     case "image": return "entry-photo"; 
     case "video": return "entry-video"; 
     case "notes": return "entry-notes"; 
    } 
};

ожидает, что е будет пункт, а не $ сфера, что и передать

ng-include="mapper($scope)"

так

ng-include="mapper()"

$scope.mapper = function(){ 
    if($scope.selected !== null) { 
     switch($scope.selected.content_type){ 
      case "image": return "entry-photo"; 
      case "video": return "entry-video"; 
      case "notes": return "entry-notes"; 
     } 
    } else { 
     return "blank-tpl"; 
    } 
};

и о размахе, ваша директива будет работать в области контроллера, так что вы можете использовать в шаблонах выбранной переменной следующим образом:

<script type="text/ng-template" id="entry-notes"> 
    <div>{{selected.data}}</div> 
</script>

и вот и все.

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

источник

2015-01-22 10:19:39 szapio

Я не хочу вас ниспровергать, но это НЕ то, что я прошу. Я определенно хочу * разделить * различные разделы, чтобы они могли быть изменены независимо. «Картпер ($ scope)» явно ошибочен, но я не знал, как понять мою цель. –

Если вы хотите отделить шаблон, просто создайте директиву с изолированной областью и определите атрибуты, которые вы хотите передать в свой шаблон. Одним из атрибутов может быть путь к вашему шаблону, который вы хотите визуализировать. – szapio

Я считаю, что это то, что ваш просят: http://www.bennadel.com/blog/2441-nested-views-routing-and-deep-linking-with-angularjs.htm

Вы также можете использовать директивы: http://onehungrymind.com/angularjs-dynamic-templates/

Вы также можете обмениваться данными между контроллерами путем определения завода (часто называется службой). Несколько контроллеров не являются обязательными: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

И директива шаблонов может быть либо включает в себя (см ниже) или HTML строка (в качестве второго звена): http://www.portlandwebworks.com/blog/testing-angularjs-directives-handling-external-templates

источник

2015-01-22 15:01:19

Некоторые из них, которые я уже прочитал: полезны, но не напрямую связаны с моей проблемой. Вместо этого нашел это, и, похоже, делает то, что я хочу (все еще проверяю): https://github.com/adjohnson916/ng-scope –

Пользовательское отображение области углового фрагмента

ответ

Смежные вопросы