Question

我的指令看起来像这样：

return {
                restrict: 'A',
                replace: true,
                scope: {
                    personId: '@',
                    relationshipId: '@',
                    relationshipColumnsShown: '@',
                    personColumnsShown: '@'
                },
                templateUrl: 'app/views/communication/displayList.html',
                controller: controller,
                require: ['$scope', 'communicationLogDataService']
            };

您可以看到有一个名为personId的属性，我在父指令中设置了这个使用上述指令的内容

<div data-display-communication-log="" data-personId="currentPerson.Id" data-relationship-Columns-Shown="true" data-person-Columns-Shown="false">
</div>

您可以看到personId正在从parent指令设置为currentPerson.Id属性。现在在child指令中，我在personId值上设置了一个监视器。当第一次加载子指令并且值未定义时，此表只会被击中一次。首次加载时，父级上的currentPerson尚不存在，因为它已加载Async。在父母（不确定这是否是导致问题的原因）。

所以我的问题是我怎样才能将currentPerson的Id从父母传递给孩子的personId？

Answer 1

当您对隔离范围使用@绑定时，它仅为您提供属性的字符串值，而不会将其作为表达式进行评估。我对你的小提琴进行了一些改动，使其成功。需要添加ng-app，更改指令中的属性名称（驼峰大小写在属性名称的模板中不起作用）并在表达式周围放置双重曲线，以便对其进行评估。我还添加了一个输入元素，以便您可以看到数据更新，在这种情况下您不需要手表。结果如下：

http://jsfiddle.net/pkqUn/3/

<div ng-app="myApp" ng-controller="myCtrl">  
    <input ng-model="currentLog.RelationshipId"></input>
      <div>
          *<div data-personselect="" data-relationship-id="{{ currentLog.RelationshipId }}"></div>*
      </div>
</div>

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

myApp.directive('personselect', function() {
    return {
        template: '<span> test {{ relationshipId }}<span>',
            restrict: 'A',
            replace: true,
            scope: {
                relationshipId: '@'
            }
        };
});

function myCtrl($scope){
    $scope.currentLog = {};
    $scope.currentLog.RelationshipId = 123;
}

虽然这会阻止你的指令修改父作用域，但我认为使用'='isolate scope绑定而不是'@'会更清楚，那么你不需要围绕属性值的curlies。 / p>

未设置指令中的AngularJS隔离范围变量

1 个答案: