Нужны примеры привязки атрибутов в пользовательских тегах AngularJS

Я пытаюсь создать пользовательский тег, подобный следующему:


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

{{type}}

... (другие компоненты) ...

Как сказано в документации, у меня есть контроллер, который устанавливает тип по умолчанию:

$scope.type = "Small";

так что если я использую свой тег без типа атрибута, он все равно будет установлен.

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

angular.module('TestPage',[])
      .directive('mytag',function() {
          return {
              restrict: 'E',
              templateUrl: 'component.html',
              scope: {
                  type: '='
              }
          }
      });

Обратите внимание, что в моем шаблоне компонента есть соответствующие настройки ng-app (ng-app = "тестовая страница»).

Моя проблема в том, что привязка к типу, по-видимому, ничего не связывает.

Я прочитал документацию о том, как связать переменную с компонентами, используя директиву. Согласно документации, вы можете делать такие привязки в области видимости. Области видимо могут содержать "объект-хэш» (что бы это ни было!), которое создает нечто, называемое "изолировать область " (???). Такие рамки могут представлятьместные свойства " следующими способами:

@ или @attr - привязать свойство локальной области к атрибуту DOM. Результатом всегда является строка, поскольку атрибуты DOM являются строками. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Задано и определение виджета области видимости: {localName: '@myAttr» }, тогда свойство области виджета localName будет отражать интерполированное значение hello {{name}}. При изменении атрибута имени будет изменяться свойство localName в области виджета. Имя читается из родительской области (не из области компонента).

Да ??? Какое отношение все это имеет к правильному синтаксису привязки?

= или = выражение - установить двунаправленную привязку между локальным свойством области действия и родительским свойством области действия. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Дано и виджет определения области видимости: {localModel: '= MyAttr» }, тогда свойство области виджета localName будет отражать значение parentModel в родительской области видимости. Любые изменения в parentModel будут отражены в localModel, а любые изменения в localModel будут отражены в parentModel.

Извините меня? Что здесь говорят ???

 или же &attr - предоставляет способ выполнить выражение в контексте родительской области. Если имя атрибута не указано, то локальное имя и имя атрибута совпадают. Дано и виджет определения области видимости: {localFn: 'прирост ()» }, а затем изолировать область видимости, свойство localFn будет указывать на функцию-обертку для выражения increment (). Часто этоЖелательно передать данные из изолированной области через выражение и в родительскую область, это можно сделать, передав карту имен и значений локальных переменных в оболочку выражения fn. Например, если выражение является приращением (количеством), тогда мы можем указать значение суммы, вызвав localFn как localFn ({amount: 22}).

Сейчас я'Я в полном замешательстве! У вас есть теги виджетов и какая-то связанная функция, которую я должен написать, чтобы выполнить привязку ??? Все, что я хочу, это привязать значение к метке метки!

Я скопировал приведенный выше текст из документации (http://docs.angularjs.org/guide/directive) чтобы подчеркнуть: этот документ читается как старая документация UNIX: действительно полезен для тех, кто уже знает систему, но не так полезен для начинающих, которые пытаются развить реальный опыт. Со всеми уроками, которые показывают, как выполнять простые задачи в AngularJS (отлично подходит для игрушечных приложений, но не так хорошо для видов клиентских приложений, которые я хочу создать), почему?Есть ли что-нибудь для более продвинутых вещей ???

Хорошо, время для меня, чтобы быть более конструктивным.

Может ли кто-нибудь предоставить несколько простых примеров того, как выполнять различные привязки, которые так трудно описать в этой документации ??? Примеры, которые показывают правильный синтаксис для этих операторов области действия и описания (на простом английском языке) того, как именно они возвращаются к атрибуту, добавляемому в пользовательский тег ???

Спасибо за ваше терпение и заранее спасибо за любую помощь.

 trailing slash15 янв. 2017 г., 03:40
Вы'не одни с этими разочарованиями. Я, конечно, чувствовал так. Тем, кто читает это и чувствует то же самое, просто ободряющее слово: держись там. Я'Я не фанат Angular или энтузиаст, но как только я сделал это через горб, я действительно начал получать удовольствие от строительства с ним. (То же самое касается UNIX!;)
 Tony Lâmpada11 мая 2013 г., 04:44
Я сделалСообщение блога об этом: я думаю, что эта тема должна быть в официальном учебнике - наличие многократно используемых компонентов - убийственная особенность. Я представилтянуть запрос для этого

Ответы на вопрос(2)

когда впервые начал изучать английский, но я попытаюсь прояснить для вас кое-что. Во-первых, при использовании этогоscope свойство, оно создает "изолированная область. " Все это означает, что он выигралне наследовать какие-либо свойства от родительских областей, и поэтому вы неНе нужно беспокоиться о каких-либо столкновениях в пределах видимости.

Теперь '@' нотация означает, что оцененное значение в атрибуте будет автоматически привязано к вашей области действия для директивы. Так, в конечном итоге с областью, имеющей свойство под названиемfoo которая держит строкубар", Вы также можете сделать что-то вроде

 Factor Three23 окт. 2012 г., 19:36
Спасибо за этот пост. Теперь я лучше понимаю различные символы и то, как они работают. Это было очень полезно.
 Jonathan Aquino16 окт. 2014 г., 00:37
Интересно, почему этоТрудно найти документацию о том, что = для передачи объекта. Вся документация, которую яМы читаем, просто говорит, что = для привязки к значению модели, которое является менее общим. Это неt должно быть значением модели - любое выражение работает.
Решение Вопроса

Ты довольно близко ..

app.directive('mytag',function() {
    return {
        restrict: 'E',
        template: '<div>' +
            '<input ng-model="controltype">' + 
            '<button ng-click="controlfunc()">Parent Func</button>' + 
            '<p>{{controlval}}</p>' + 
         '</div>',
        scope: {
            /* make typeattribute="whatever" bind two-ways (=)
            $scope.whatever from the parent to $scope.controltype
            on this directive's scope */
            controltype: '=typeattribute',
            /* reference a function from the parent through
               funcattribute="somefunc()" and stick it our
               directive's scope in $scope.controlfunc */
            controlfunc: '&funcattribute',
            /* pass a string value into the directive */
            controlval: '@valattribute'
        },
        controller: function($scope) {                  
        }
    };
});

  <div ng-controller="ParentCtrl">
       <!-- your directive -->
       <mytag typeattribute="parenttype" funcattribute="parentFn()" valattribute="Wee, I'm a value"></mytag>
       <!-- write out your scope value -->
       {{parenttype}}
  </div>


  app.controller('ParentCtrl', function($scope){ 
       $scope.parenttype = 'FOO';
       $scope.parentFn = function() {
           $scope.parenttype += '!!!!';
       }
  });

Магия в основном вscope: декларация в вашем определении директивы. имея какой-либоscope: {} там будет "изолировать» сфера от родителя, то есть она получаетс собственной областью ... без этого он будет использовать родительскийсферу. Остальная часть магии находится в сфересвойства:scope: { 'internalScopeProperty' : '=externalAttributeName' }... где= представляет собой двусторонний сценарий связывания. Если вы измените это= к@ вы'Посмотрим, как это просто позволяет передать строку в качестве атрибута в директиву.& для выполнения функций из родительской областис контекстом.

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

РЕДАКТИРОВАТЬ:Вот рабочая ПЛНКР

 Ben Lesh25 окт. 2012 г., 03:23
Что ж. Мы не согласны. Достаточно ли моего ответа для вашего вопроса?
 Factor Three23 окт. 2012 г., 19:41
Спасибо тебе за этот пост. Пример кода был очень полезным. К сожалению, я не могу дублировать ваш пример. У меня есть несколько вопросов: пустойконтроллер» Функция в вашем объявлении директивы, похоже, ничего не делает. Это связано с функцией, объявленной в app.controller? Также: как именно объявлено приложение? Я объявил директиву, используя angular.module (). Вы используете подобное утверждение для "приложение"?
 Ben Lesh24 окт. 2012 г., 20:54
JSFiddle не делаетt как Angular ... использоватьplnkr.coI»
 Ben Lesh24 окт. 2012 г., 21:00
мы обновили ответ, включив ссылку на рабочий пример ... также там была опечатка ... это должно было бытьtemplate неtemplateUrl
 Factor Three07 нояб. 2012 г., 22:57
Да, вашего ответа было достаточно, даже если вам есть о чем понятьполный» ОО языки. Является ли Javascript полным или нет, это не просто вопрос мнения. Вы можете показать его полноту, предоставив следующую информацию: 1) какое ключевое слово в Javascript используется для объявления класса? 2) Какие ключевые слова Javascript объявляют закрытые / защищенные переменные? 3) что такоевстроенный синтаксис для объявления подкласса? Эти и другиевстроенный поддерживает создание ОО языков "полный», Без них любой так называемый ОО-язык является неполным, независимо от того,мнения ...
 Factor Three24 окт. 2012 г., 21:09
Понял. Пример, кажется, работает сейчас. Я действительно должен был заметить опечатку ...
 Factor Three24 окт. 2012 г., 18:03
Извините, Блеш, за мое незнание переменных JavaScript. Мой опыт в программировании на Java, C ++ и C #. Я не эксперт по Javascript. Я также занимаюсь программированием Actionscript, но Actionscript гораздо больше »полный» чем Javascript ... В любом случае, спасибо за разъяснения. Вопрос: чтобы использовать AngularJS, нужно ли быть экспертом по Javascript? Я довольно хорошо разбираюсь в jQuery, не зная внутренности Javascript. Верно ли это для AngularJS или нужно быть настоящим экспертом по Javascript, чтобы хорошо его использовать?
 Ben Lesh24 окт. 2012 г., 21:53
Вы можете создавать классы с помощью JavaScript. Вы можете использовать наследование с JavaScript. JavaScript завершен. Это'просто трудно понять, когда тыиспользуется для Java и C #. Я прошел через ту же мысль в тот день.
 Factor Three24 окт. 2012 г., 21:12
Кстати: Javascriptне такой же полный, как и ActionScript, потому что, несмотря на то, что он является объектно-ориентированным языком (каким он на самом деле является), Javascript не имеет синтаксиса для классов, наследования и т. д. Это не имеет ничего общего с тем, что вы можете или не можете делать с языком. Это связано с функциями, предлагаемыми с синтаксисом языка.
 Factor Three24 окт. 2012 г., 22:45
Я не'не могу сказать, что ты не могсоздавать классы в Javascript (я делаю это все время!). Я сказал, что у него нет синтаксиса для классов. Это само по себе делает его неполным. Добавьте отсутствие концепции приватности, защищенности и т. Д. И отсутствие механизма наследования. Вы можете реализовать наследование в Javascript, вы даже можете играть в игры с областями видимости и делать переменные в объекте эффективно закрытыми. Тот факт, что вы должны реализовывать и играть в игры на уровне, делает язык неполным. Полный язык (C ++, C #, Java, Groovy, Scala, Ruby) не требует таких усилий. Javascript неполный. Период.
 Ben Lesh23 окт. 2012 г., 19:53
Пустойcontroller функция является контроллером для директивы. ИЛИ ... контроллер для чегос в.template
 Ben Lesh23 окт. 2012 г., 19:51
приложение будет вашим модулем ...var app = angular.module('myApp', []); ... извини, этоs тип стандартного имени переменной для основного модуля.
 Ben Lesh23 окт. 2012 г., 19:54
$scope вcontroller часть вашей директивы - это область действия, специфичная для этой директивы, и это область действия, определенная вscope параметр декларации директивы.
 Ben Lesh24 окт. 2012 г., 19:21
Чтобы сделать разработку на стороне клиента в целом, это 'Хорошая идея получить немного опыта в JavaScript. Мой фон также в C #, Java и ActionScript. Уверяю вас, что ActionScript больше нетполный» чем JavaScript, вы можете делать все что угодно в JavaScript, что вы можете делать в ActionScript, только ключевых слов меньше. ;) Главное, что нужно знать, это то, что JavaScript это определеннос очень полным, очень способным языком, и этоПросто очень отличается от C # или Java. Таким образом, вы можетеЕсли думать о JavaScript с точки зрения Java или C #, вы должны думать о нем по-своему.

Ваш ответ на вопрос