在 AngularJS 中销毁和创建指令答案

【问题标题】：Destroying and creating a directive in AngularJS在 AngularJS 中销毁和创建指令
【发布时间】：2017-03-08 06:37:35
【问题描述】：

我对 AngularJS（具体来说是异步编程范式）非常陌生，并且正在从事我的第一个 AngularJS 项目。我知道它的基本原理。
问题：我有一个指令，只有在我有数据时才需要创建，并且数据是异步获取的。此外，该指令存在于控制器的模板中。我应该怎么做？
我的方法：在指令上有一个 ng-if ="variable" ，一旦数据可用，就需要创建该指令，并监视该变量，一旦设置了变量，就会创建指令。
但是，我无法以编程方式执行此操作！我怎样才能做到这一点，或者有更好的方法。

控制器

$scope.dataFeteched= false;
$http.get(url)
    .then(function success(result){
        $scope.dataFeteched = true;
    });

HTML

<span>Hello World</span>
<directive-abc ng-if="dataFeteched"></directive-abc>`

还有，一旦 $digest 已经完成了控制器模板的执行，它又将如何执行该特定指令？

【问题讨论】：

它感觉你在这里太努力了。一般来说，指令已经响应异步数据，不需要“延迟”。当没有数据时，在 DOM 中存在指令是否会导致问题？
异步数据获取代码在控制器中，如果指令存在于 DOM 中，是的，这是一个问题。这张图片可能会帮助您了解我在做什么code design diagram
该图应该显示什么？它绝对不会显示任何数据，也不会显示您有顾虑的原因。同样，如果指令设计得当，处理异步数据应该没有问题……这是 Angular 的关键租户之一，也是使其如此强大的原因之一。你在这里问的是如何阻止框架中内置的东西自然发生，而不是解释为什么你觉得你需要这样做。
不要在程序上考虑角度，而是从组合上考虑。角度摘要循环知道它正在观察的数据何时发生变化，并调整 DOM 以响应这些数据变化。除非你的指令做了一些非常不正常的事情，否则它应该是空的，没有数据，然后在数据出现时呈现，而不需要你强行绕过它。

标签： javascript angularjs angularjs-directive frontend angularjs-digest

【解决方案1】：

您可以将指令放在 html 元素中，并在该元素上使用 ng-if，如下所示： <div ng-if="dataFeteched"><directive-abc ></directive-abc></div>

如果 datafetched 为真，这将加载指令。

【讨论】：

【解决方案2】：

请参阅下面的示例。

控制器和指令

app.controller('someCtrl', function($scope, $http){
    // intitially $scope.dataFetched is set to false
    $scope.dataFetched = false;
    $http.get('https://jsonplaceholder.typicode.com/posts/1')
     .then(function(response){
        // some work based on response
        // upon callback set the $scope.dataFetched to true
        $scope.dataFetched = true;

  });
});
zapp.directive("someDirective", function() {
 return {
     template : "<h1>I am a directive!</h1>"
 };
});

在 HTML 中

<div ng-controller="someCtrl">
  <some-directive ng-show="dataFetched"></some-directive>
</div>

现在当你运行它时，它只会在 http 调用返回后显示指令。为了测试，您可以在 http 调用中注释掉 $scope.dataFetched = true;，稍后再取消注释。

【讨论】：

它将加载指令。检查应用指令的调试器链接功能。
当然这会加载指令。但只有在从 http 调用异步返回之后。您可以在回调中添加条件，然后加载指令。你说的是哪个链接？
指令的链接功能。没有您的指令将立即加载视图加载。