Question

我正在执行一个获取一些信息的ajax调用： <span id="test" abc-dir="test"> </span>

现在，我还有一个角度指令，我需要在通过ajax返回的上述信息上运行。

问题是：Angular指令首先被启动并尝试在DOM中找到abc-dir但是由于Ajax调用没有完成，它什么也没做。如何首先触发ajax调用然后调用Angular指令？

我的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>

My Angular指令代码如下：

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>'; } } }])

Answer 1

在指令中使用pre。类似的东西：

pre: function(....) {
}

在链接之前会调用它。

Answer 2

return '<span ng-bind-html="'+value+'">x</span>';不要手动绑定这些内容，而是在模板中执行此操作。 <div>{{value}}</div>。使用观察程序监听propertyMap上的更改，并在其更改后立即应用其他逻辑（通过ajax加载）$scope.$watch()。如果你做的一切正确，你的模板将自动更新。（如果你没有使用angular的$ http服务，你可能必须使用$ scope。$ apply（）。

这是一个如何用angular（代码未测试）

写这个的例子

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>

如果您是通过ajax加载html并希望在页面上呈现它（具有角度功能），请考虑使用ng-include指令。否则，您必须使用$compile服务自行编译html：

// 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);
});

angular指令和Ajax调用之间的时间问题

2 个答案: