Директива AngularJS не отображает шаблон

Question

Директива AngularJS не отображает шаблон

0

Мой взгляд прост:

<job-template ng-if="job"></job-template>

Моя директива:

.directive('jobTemplate', function(){
  return {
    restrict: 'AE',
    replace: true,
    link: function(scope,element, attrs) {
        var JobStatus = scope.job.JobStatus;
        var text = "<p>"; 

        if(JobStatus === 'Created'){
          text += "{{job.id}} was created."
        }

        else if(JobStatus === 'Processing'){
          text += "{{job.id}} is currently processing."
        }

        text += "</p>";
        console.log("text");
        console.log(text);
        return text;
    }
  };

})

Когда я запускаю свою страницу, мой элемент <job-template> не заменяется ничем - хотя правильный text загружается в консоль.

Что я тут сделал?

Jascination 25 март 2016, в 09:14

Источник

Теги:

javascript

angularjs

angularjs-directive

2 ответа

Ещё вопросы

Pankaj Parkar · Answer 1 · 2016-03-25T05-20-00.000Z

функция link не предназначена для возврата HTML-кода, как вы думаете. В основном это должно быть, чтобы обеспечить контроль над угловым скомпилированным DOM, когда область действия связана с директивным элементом. В директиве вы можете указать html над параметром template/templateUrl. Используйте ng-if для наличия условного элемента.

директива

.directive('jobTemplate', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p>'+
        '<span ng-if="job.JobStatus == \'Created\'">{{job.id}} was created.</span>'+
        '<span ng-if="job.JobStatus == \'Processing\'">{{job.id}} is currently processing.</span>'+
      '</p>',
    link: function(scope, element, attrs) {}
  };

})

Демо здесь

Arun Shinde · Answer 2 · 2016-03-25T06-37-00.000Z

0

Попробуйте этот код https://plnkr.co/edit/cpdAqWN0SeUx5Gy9CQkR?p=preview

app.directive('jobTemplate', function($compile){
  return {
restrict: 'AE',
replace: true,
link: function(scope,element, attrs) {
  console.log(element)
    var JobStatus = scope.job.JobStatus;
    var text = "<p>"; 

    if(JobStatus === 'Created'){
      text += "{{job.id}} was created."
    }

    else if(JobStatus === 'Processing'){
      text += "{{job.id}} is currently processing."
    }

    text += "</p>";
    element.html(text);
    $compile(element.contents())(scope);
 }
};
})

Arun Shinde 25 март 2016, в 06:37

0

способ, которым вы реализованы, верен ... но вы должны оставить условное добавление или удаление части DOM, используя ng-if , чтобы это не создавало проблем, если значение job будет загружено ajax.
Pankaj Parkar 25 март 2016, в 09:52
0

Мы можем сделать это тоже в рамках директивы. Ранее я сделал с WordPress SPA. Это слишком длинная директива, поэтому невозможно упомянуть обо всех этих вещах, но я справился с помощью scope. $ Watch ('$ viewContentLoaded', function () {}) внутри директивы.
Arun Shinde 25 март 2016, в 10:16
0

$ watch на $viewContentLoaded загружен тоже не сработает .. вам нужно специально разместить надзор за job , но было бы плохой практикой иметь $watch в коде. Постарайтесь избегать наблюдателей, чтобы код был более чистым. ,
Pankaj Parkar 25 март 2016, в 10:19
0

Да согласен с вами. Иногда другие среды и технологии не позволяют этого. В моем случае WordPress абсолютно бесполезен, но клиент выбрал эту единственную технологию, и он никогда не оставлял мне выбор.
Arun Shinde 25 март 2016, в 10:28
0

вот почему я сказал, что вы правы. но это будет работать только со статическими данными, как вы упомянули ..
Pankaj Parkar 25 март 2016, в 10:29

Показать ещё 3 комментария