вопрос синхронизации между угловой директивой и Ajax вызовом

Я исполняющий вызов Ajax, который извлекает информацию: <span id="test" abc-dir="test"> </span>вопрос синхронизации между угловой директивой и Ajax вызовом

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

Проблема заключается в том, что сначала начинается инициирование угловой директивы и пытается найти abc-dir в DOM, однако, поскольку вызов Ajax не завершен, он ничего не делает. Как сначала запустить вызов ajax, а затем вызвать угловую директиву?

Мой HTML-код:

<body ng-app="TestApp" ng-controller="TestCtrl" ng-init="init()"> <div class="test" id="testid"></div> <script> require(['jquery'], function($) { $.ajax({ type: "GET", url: "....", success: function(data) { document.getElementById('testid').innerHTML = data } }); }); </script>

Мой Угловая код директивы выглядит следующим образом:

angular.module('TestApp', ['ngSanitize']) .directive('abcDir',['abcPropertyMap',function(abcPropertyMap) { return { restrict: 'A', template: function(elm,attrs){ var value = abcPropertyMap[attrs.abcProperty]; return '<span ng-bind-html="'+value+'">x</span>'; } } }])

источник

2014-09-02 akoy

увидеть это http://stackoverflow.com/questions/21487617/how-do-i-make-angular-js-reevaluate- recompile-inner-html – Callebe

Почему вы используете jquery ajax, когда угловой уже предоставляет '$ http'? – PSL

Использование pre в директиве. что-то вроде:

pre: function(....) { 
}

Это будет вызвано перед связыванием.

источник

2014-09-02 20:47:20 ABOS

return '<span ng-bind-html="'+value+'">x</span>'; Не связывайте это вручную, сделайте это в своем шаблоне. <div>{{value}}</div>. Используйте наблюдателя, чтобы прослушивать изменения в свой propertyMap и применять дополнительную логику, как только она изменится (загружается через ajax) $scope.$watch(). Если вы все сделаете правильно, шаблон будет автоматически обновляться. (Вы, возможно, придется использовать $ объем. $ Применять(), если вы не используете $ HTTP службы угловую х.

Вот пример того, как можно было бы написать это в угловой (код не тестировался)

в JS часть:

angular.module('stackoverflow', []) 
.controller('questionsCtrl', function($scope, $http) { 
    $scope.questions = null; 

    $http.get('stackoverflow.com/questions').then(function(questions) { 
     $scope.questions = questions; 
    }); 
}) 
.directive('questionsList', { 
    restrict: 'EA', 
    templateUrl: 'directives/questionsList.html', 
    scope: { 
     questions: '=', 
    }, 
    controller: function($scope) { 
     $scope.$watch('questions', function(newValue, oldValue) { 
      if (newValue !== null) console.log('all questions loaded'); 
     }); 
    } 
})

и HTML:

<!-- index.html --> 
<html ng-app="stackoverflow"> 
<head></head> 
<body> 
    <div ng-controller="questionsCtrl"> 
     <questions-list questions="questions"></questions-list> 
    </div> 
<body> 
</html> 

<!-- directives/questionsList.html --> 
<ul> 
    <li ng-repeat="question in question track by $index"> 
     {{question.title}} 
    </li> 
</ul>

Если вы загружаете HTML через AJAX и хотите сделать его на своей странице (с угловой функциональностью) рассмотреть возможность использования ng-include. В противном случае вам придется скомпилировать HTML самостоятельно, используя $compile сервис:

// example of how to compile html in your controller 
// consider thou that $compiling or modifying html from within your controller is considered as bad practice 
.controller('someCtrl', function($scope, $element, $compile, $timeout) { 
    var scope = $scope.$new(); 
    scope.question = {title: 'angular stuff'}; 
    $element.append(
     $compile('<div>{{question.title}}</div>')(scope) 
    ); 

    // will update your html in 2 seconds 
    $timeout(function() { 
     scope.question.title = 'javascript stuff'; 
    }, 2000); 
});

источник

2014-09-02 21:12:52

вопрос синхронизации между угловой директивой и Ajax вызовом

ответ

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