承诺解决之前，指令正在呈现 [英] Directive is being rendered before promise is resolved

问题描述

我有让我的指令，只渲染后，我的承诺已经解决了内容问题。我以为则（）应该这样做，但它似乎并不奏效。

I am having issues getting my directive to render its content only after my promise has been resolved. I thought then() was supposed to do this but it doesn't seem to be working..

下面是我的控制器：

// Generated by CoffeeScript 1.6.3
(function() {
  var sprangularControllers;

  sprangularControllers = angular.module('sprangularControllers', ['sprangularServices', 'ngRoute']);

  sprangularControllers.controller('productsController', [
    '$scope', '$route', '$routeParams', 'Product', 'Taxonomy', function($scope, $route, $routeParams, Product, Taxonomy) {
      Taxonomy.taxonomies_with_meta().$promise.then(function(response) {
        return $scope.taxonomies = response.taxonomies;
      });
      return Product.find($routeParams.id).$promise.then(function(response) {
        return $scope.currentProduct = response;
      });
    }
  ]);

}).call(this);

我的指令：

// Generated by CoffeeScript 1.6.3
(function() {
  var sprangularDirectives;

  sprangularDirectives = angular.module('sprangularDirectives', []);

  sprangularDirectives.directive('productDirective', function() {
    return {
      scope: {
        product: '='
      },
      templateUrl: 'partials/product/_product.html',
      link: function(scope, el, attrs) {
        console.log(scope);
        console.log(scope.product);
        return el.text(scope.product.name);
      }
    };
  });

}).call(this);

范围返回好吧，当我检查它在开发工具 scope.product 不是不确定的，但是我是presuming这是因为当我检查承诺已得到解决？

Scope returns okay, and when I check it in dev tools scope.product is not undefined however I am presuming that is because by the time I check it the promise has been resolved?

的console.log（scope.product）然而，返回undefined。

console.log(scope.product) however, returns undefined..

推荐答案

由于你的价值是异步填充，你要添加监视功能，更新你的绑定元素。

Because your value is asynchronously populated, you'll want to add a watch function that updates your bound element.

  link: function(scope, el, attrs) {
    scope.$watch('product', function(newVal) {
        if(newVal) { el.text(scope.product.name);}
    }, true);
  }

您也可以将大量的复杂性成指令的控制器，并使用链接功能仅用于操纵DOM。

You could also move a lot of complexity into a directive controller and use the link function for manipulating the DOM only.

到 $的真正第三个参数看引起了深刻的手表，因为你结合这一指令到模型。

The true third parameter to $watch causes a deep watch, since you're binding this directive to a model.

下面是几个具有很好的例子链接：结果
 <一href=\"http://www.ng-newsletter.com/posts/directives.html\">http://www.ng-newsletter.com/posts/directives.html

<一href=\"http://seanhess.github.io/2013/10/14/angularjs-directive-design.html\">http://seanhess.github.io/2013/10/14/angularjs-directive-design.html

Here are a couple of links with good examples:
http://www.ng-newsletter.com/posts/directives.html
http://seanhess.github.io/2013/10/14/angularjs-directive-design.html

这篇关于承诺解决之前，指令正在呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！