AngularJS 自定义标签指令如何在来自 $http 调用时扩展 {{scopevar}}答案

【问题标题】：AngularJS custom tag directive how to expand {{scopevar}} when coming from $http callsAngularJS 自定义标签指令如何在来自 $http 调用时扩展 {{scopevar}}
【发布时间】：2023-03-16 15:59:02
【问题描述】：

注意

此问题已在此处重新表述和回答：

AngularJS: model data from http call not available in directive

我正在尝试使用 AngularsJS 指令。创建了一个简单的指令，但来自 $http 调用时 {{scopevars}} 不存在。例如：

控制器

function AppCtrl($scope, $routeParams, Card) {
    $scope.abc = "this works well";
    $scope.user = User.get({userId: 1}, function(user) {
      });
}

用户服务（运作良好）

angular.module('userServices', ['ngResource'])
    .factory('User', function ($resource) {
    return $resource('/user/:userId.json', {}, {
        query: {
            method: 'GET',
            params: {
                userId: 'user'
            },
            isArray: true
        }
    });
}

这是指令代码（已损坏）：

/**
 * Create the <pretty-tag>{{var}}</pretty-tag>
 */
.directive('prettyTag', function($interpolate) {

return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        var text = element.text();
        var e = $interpolate(text)(scope);
        var htmlText = "<b>" + e + "</b>";
        element.html(htmlText);
    }
};

结果：

// => In HTML view <pretty-tag>{{abc}}</pretty-tag> => <b>this works well</b>.
// => In HTML view <h1>{{user.name}}</h1> => <h1>Bob</h1>.
// => In HTML view <pretty-tag>{{user.name}}</pretty-tag> => Doesn't work (empty).

有人能帮我理解为什么 <pretty-tag>{{user.name}}</pretty-tag> 是通过 $http 调用设置的 var 不起作用吗？

【问题讨论】：

什么值分配给“var”变量，或者您可以提供控制器代码或为相同的创建 jsfiddle..
您还可以检查您是否错过了您在当前帖子中提供的代码中的括号

标签： angularjs angularjs-directive

【解决方案1】：

在工作的 jsfiddle 下方

http://jsfiddle.net/vishalvasani/cPVDn/10/

.directive('prettyTag', function($interpolate) {

return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        var text = element.text();
        var e = $interpolate(text)(scope);
        // =============> problem e is always empty
        console.log(e)

        var htmlText = "<b>" + e + "</b>";
        element.html(htmlText);
    }
};
});

【讨论】：

我更新了我的问题。我的代码（和你的）在大多数情况下都有效，但在通过 http 调用设置 var 时无效。查看更新问题。

【解决方案2】：

我认为您需要像这样在.get() 方法的callback 中分配用户值

User.get({userId: 1}, function(user) {
    $scope.user = user;
});

您可以像这样将模型user 传递给指令

<pretty-tag ng-model='user'></pretty-tag>

在指令内部，通过ngModel从属性访问文本模型。

var text = attrs.ngModel;

【讨论】：

范围已在我的代码中更新。我也试过你的，但它不起作用。
@supercobra User.get() 做什么？可以贴一下代码吗？粘贴一些关键操作的代码非常重要，这样我们才能更清楚地了解问题。现在每个人都在猜测。
@supercobra 已更新。请尝试。
还是一样的行为。指令中不存在来自异步调用的数据......我想知道接下来要做什么来解决这个问题。

【解决方案3】：

在link:函数中，尝试：

  $scope.$watch('user', function () {
    var text = element.text();
    var e = $interpolate(text)(scope);
    var htmlText = "<b>" + e + "</b>";
    element.html(htmlText);
  });

这是未经测试的，但看起来页面在 $http 调用返回数据之前呈现，因此 $scope.user 未定义。

【讨论】：