AngularJS Как получить доступ к элементам внутри директивы, прежде чем они будут заменены

Как получить элемент ввода из директивы до того, как шаблон перезапишет содержимое?

HTML

<div xxx>
  <input a="1" />
</div>

app.directive('xxx', function(){
  return {
        restrict: 'A',
        template: '<p></p>',
        replace: true, //if false, just leaves the parent div, still no input
        compile: function(element, attrs) {

            console.log(element);

            return function (scope, iElement, iAttrs) {
            }
        }
    };
});

Я нахожусь на angular 1.0.x, я не могу передать необязательные параметры области с помощью '=?' синтаксис, и я хочу, чтобы можно было отменить часть шаблона по умолчанию в директиве очень гибким способом. вместо того, чтобы добавлять переменную или атрибут scope каждый раз, когда я только планирую пройти через директиву, я хочу иметь возможность использовать весь элемент, который будет использоваться.

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

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

Обновление Кажется, если я не предоставляю шаблон или URL-адрес шаблона и вместо этого заменю содержимое вручную, используя $templateCache, я могу получить доступ к внутренним элементам. Я хочу позволить angular обрабатывать шаблон и замену, хотя и просто хочу иметь доступ к содержимому в директиве, естественно, до того, как они будут заменены.

Решение Plunkr

HTML

  <body ng-controller="MainCtrl">
        <div editable="obj.email">
            <input validate-email="error message" ng-model="obj.email" name="contactEmail" type="text" />
        </div>
  </body>

app.controller('MainCtrl', function($scope) {
  $scope.obj = {
    email: 'xxx'
  };
});

app.directive('editable', function($log){
    return {
        restrict: 'A',
        transclude: true,
        template: '<div ng-show="localScopeVar">{{value}}<div ng-transclude></div></div>',
        scope: {
          value: '=editable'
        },
        link: function(scope) {
          scope.localScopeVar = true;
        }
    };
});


app.directive('validateEmail', function($log){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: true,
        link: function(scope, el, attrs, ctrl) {
          console.log(attrs['validateEmail']);
        }
    };
});

Ответы

Ответ 1

Я считаю, что вы ищете функцию transclude (ссылка на 1.0.8 docs). Вы можете видеть, что происходит с:

app.directive('xxx', function($log){
    return {
        restrict: 'A',
        transclude: true,
        compile: function(element, attrs, transclude) {

            $log.info("every instance element:", element);

            return function (scope, iElement, iAttrs) {

                $log.info("this instance element:", element);

                transclude(scope, function(clone){

                    $log.info("clone:", clone);

                });
            }
        }
    };
});