Question

我有一个自定义指令。在其中链接函数的属性，我试图获取attributes.user的值;在我的视图页面中，此自定义指令以下列方式使用：

<div my-directive user="{{user.name}}"></div>

现在，user是一个模型对象，我在使用$ http服务向某个URL发出请求后，从JSON响应中获取回来。但是，当我通过插入＆＃39; debugger＆＃39;来检查我的指令中的attribute.user的值。在我的代码中，我为attribute.user获取了一个空白。如果我将user.name设置为＆＃34; hello＆＃34;，我实际上得到了＃34;你好＆＃34;背部。我也尝试过：

attributes.$observe('user', function(val){...})

但无济于事。这是因为我发出了异步请求，这就是为什么我要填空？发生了什么，我该如何解决这个问题？谢谢！

编辑：这是我的指令代码的片段

angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: true,
    link: function($scope, elem, attr) {
      $scope.user = $.parseJSON(attr.user)
    },
    controller: ['$scope', '$rootScope', 'GlobalVariables', function($scope, $rootScope, GlobalVariables) {

    $rootScope.hasSignedUp = GlobalVariables.hasSignedUp;
    $rootScope.signUpId = GlobalVariables.signUpId;

    $rootScope.$watch('hasVoted', function(newVal, oldVal) {
      if(newVal === true) {
        if($rootScope.signUpId == $scope.user.id){
          $scope.text = 'Signed Up!';
        }else{
          $scope.text = 'Sign Up';
        }
      }else{
        $scope.text = 'Sign Up';
      }
     });
    }]
  };
});

Answer 1

首先，scope不应该是布尔值，而是包含所需属性键的字典，请将scope更改为：

scope: {
    user: '=',
}

此外，目录期望范围值是变量而不包含角度手柄。这是正确的方法：

<div my-directive user="user"></div>

现在应该可以了。有关详细信息，请参阅AngularJS's documentation。

Answer 2

编辑：您可以定义您的隔离范围和绑定指令和两个指令，如下面的指令

angular.module('myApp').directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: {
            user:'=user'
        },
        link: function (scope, elem, attr) {

           //use link to subscribe and handle internal logic

           //Do something with the scope.user here

            console.log(scope.user);


        },
        controller: ['$scope', '$rootScope', 'GlobalVariables', function ($scope, $rootScope, GlobalVariables) {

            //use this to export your directive functionality


        }]
    };
});

请注意， link 功能用于处理指令内部逻辑，控制器功能用于导出指令功能。

此处提供了MOre信息https://docs.angularjs.org/guide/directive

Angular指令 - 异步attr插值

2 个答案: