AngularJS Нечетная директива Сфера действия

После описания моей настройки мои вопросы ниже выделены жирным шрифтом.AngularJS Нечетная директива Сфера действия

index.html

<div ng-controller="MyCtrl"> 
    <user-picker placeholder="Type a name..."></user-picker> 
</div>

Установка:

var app = angular.module('app', ['app.directives', 'app.controllers']); 
var directives = angular.module('app.directives', []); 
var ctrls = angular.module('app.controllers', []);

Контроллер:

ctrls.controller('MyCtrl', function($scope) { 
    $scope.foo = 'this is a foo'; 
});

Директива:

directives.directive('userPicker', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     placeholder: '@' 
    }, 
    templateUrl: 'file.html', 
    link: function postLink($scope, ele, attrs) { 
     console.log($scope); 
     console.log('[ng] Scope is: '); 
     console.log($scope.placeholder); 
     console.log($scope.$parent.foo); 
    } 
});

file.html (директива):

<span> 
    <input placeholder="{{placeholder}}" type="text"> 
</span>

Так что я хочу, чтобы в конечном итоге, как правило, работает:

<span placeholder="Type a name..."> 
    <input placeholder="Type a name..." type="text"> 
</span>

Атрибут placeholder правильно решена.

Это правильный путь для достижения этой цели? Обратите внимание, что атрибут заканчивается в двух местах.

Почему это странное поведение: Во-вторых, я сбит с толку результатами console.log($scope). Консольный выход показывает точно установленный placeholder атрибут объекта $scope. Однако даже в том случае, когда следующий оператор console.log($scope.placeholder) возвращает «undefined». Как это возможно, когда на выходе консоли четко отображается атрибут?

Мои цели:

Переместить или скопировать атрибут placeholder от родителя до ребенка <input> тега.
Имейте доступ к области шаблона из функции связывания.
Ссылка на родителя MyCtrl Контроллер, который соответствует этой директиве.

Я был почти там, пока не столкнулся с странным поведением, отмеченным выше. Любые мысли оцениваются.

источник

2013-08-05 vcardillo

Вы делаете это правильно, насколько я могу судить. Странность с консолью связана с асинхронным материалом, который угловой выполняет за кулисами. Http: // StackOverflow.com/questions/16571003/javascript-console-log-shows-different-values-on-same-object – jdp

Хм, интересно. Знаете ли вы, есть ли способ переместить атрибуты к детям, а не копировать их (поскольку я заканчиваю выше). – vcardillo

Вместо того, чтобы пытаться прочитать это, область действия будет читать работу attrs?

Некоторые HTML

<script type="text/ng-template" id="file.html"> 
    <span> 
     <input placeholder="{{placeholder}}" type="text"/> 
    </span> 
</script> 
<body ng-app="app"> 
<div ng-controller="MyCtrl"> 
    <user-picker placeholder="Type a name..."></user-picker> 
</div> 
</body>

Некоторые JS

var app = angular.module('app', ['app.directives', 'app.controllers']); 
var directives = angular.module('app.directives', []); 
var ctrls = angular.module('app.controllers', []); 

ctrls.controller('MyCtrl', function ($scope) { 
    $scope.foo = 'this is a foo'; 
}); 

directives.directive('userPicker', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      placeholder: '@' 
     }, 
     templateUrl: 'file.html', 
     link: function postLink($scope, ele, attrs) { 
      console.log($scope); 
      console.log('[ng] Scope is: '); 
      console.log(attrs["placeholder"]); 
      console.log($scope.$parent.foo); 
     } 
    } 
});

скрипку

http://jsfiddle.net/Rfks8/

источник

2013-08-05 02:54:15 shaunhusain

Вы правы, это действительно работает. Я не знаю, почему я об этом не думал. В любом случае, спасибо! :) – vcardillo

AngularJS Нечетная директива Сфера действия

ответ

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