更新2

Question

我已经定义了一个Angular指令，它似乎工作得很好 - 只要我对它的属性值进行硬编码。例如：

<notes-history application-id="11"></notes-history>
{{applicationid}}
<notes-history application-id="{{applicationid}}"></notes-history>

第一个<notes-history>指令正常工作。纯文本绑定工作正常。但是，当第二次调用指令的link()函数时，application-id（基于传递给link()的第3个参数）是一个空字符串。如何将其绑定到属性？

更新

这里是该指令的（大部分）完整代码。（从TypeScript生成的Javascript）

var notesHistory = (function () {
    function notesHistory(notesService, alertsService) {
        this.notesService = notesService;
        this.alertsService = alertsService;
        var directive = {};
        directive.priority = 0;
        directive.restrict = "EA";
        directive.scope = { applicationId: "@applicationId" };
        directive.replace = true;
        directive.transclude = false;
        directive.templateUrl = "app/views/notesHistory.html";
        directive.link = function (scope, instanceElement, instanceAttributes, controller, transclude) {
            // elided.     
            // instanceAttributes.applicationId is correct here 
            // when hard-code, and '' when bound.
            });
        };
        return directive;
    }
    return notesHistory;
})();
app.directive("notesHistory", ["notesService", "alertsService", notesHistory]);

更新2

我实际上已经弄清了我的问题，结果证明与指令无关。

问题在于控制器的第一个（实际上也是唯一的）操作是进行异步Web服务调用以获取数据。所以事件的顺序是：

运行Controller（启动网络服务电话）
运行指令（使用数据）
来自webservice的流程响应（接收指令所需的数据）

由于这已经成为一个完全不同的问题，我将为它创建一个新问题。

Answer 1

它应该工作。这是一个超级简单的plunker，例证它：http://plnkr.co/edit/tYFbxxAxwLXAzaNyCOwE?p=preview

HTML

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <test foo="bar"></test>
  <test foo={{name}}></test>
</body>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('test', function() {
  return {
    scope: {
      foo: '@'
    },
    template: 'Name: {{foo}}'
  };
});

如何绑定AngularJS指令中的属性？

更新2

1 个答案:

HTML

JS