javascript - Angular 将参数传递给指令

Question

我试图通过指令中的 View 传递一些信息，但它似乎根本不起作用。事实上，即使我绑定(bind)范围，我也有字符串值 writter :

这是指令

angular.module('app')
    .directive('anomalieTableau', function () {

        var controller = ['$scope', '$attrs', 'srv_traitementsSite', function ($scope, $attrs, srv_traitementsSite) {
            $scope.anomalies = [];

            var idSite = $attrs.idsite;
            alert(idSite);
            var idAgence = $attrs.idagence;
            var dateDebut = $attrs.datedebut;
            var dateFin = $attrs.datefin;

            var promise = undefined;
            if (idAgence && idSite) {
                promise = srv_traitementsSite.TraitementSiteAgenceAnomalie(idSite, idAgence, dateDebut, dateFin);
            }

            promise.then(function (response) {
                $scope.anomalies = response.data;
            }, function (response) {

            });
        }];

        return {
            restrict: 'EAC',
            templateUrl: 'tpl/directive/AnomalieTableauDirective.html',
            controller: controller,
            scope: {
                idsite: '=',
                idagence: '=',
                datedebut: '=',
                datefin: '='
            }
        };
    });

这是 HTML 调用:

<div anomalie-tableau idsite="site._id" idagence="AgenceId" datedebut="dateDebutStats"
                     datefin="dateFinStats" class="col-md-12"></div>

这是指令中的警报结果:

site._id

而不是:

123456789

编辑:在属性指令的调用中将 site._id 更改为 {{site._id}}，它不会更改任何内容并给出此错误:

Syntax Error: Token 'site._id' is unexpected, expecting [:] at column 3 of the expression [{{site._id}}] starting at [site._id}}].

我做错了什么？

Answer 1

属性始终是字符串。因此，您需要插入值 ({{site._id}})，然后可能将字符串 ($attrs.idsite) 转换为您想要的类型。

关于您的范围设置:然后您必须使用 $scope 而不是 $attrs (并且不需要插值)，因为 Angular 会将这些值复制到你的范围。如果您使用 = ，它将是双向绑定(bind)，并且您不需要在指令属性中插入值。

如果您出于某种原因需要使用$attrs，您可以自己进行插值。删除范围设置，使用 idsite="{{...}}" 并将 $interpolation Service 注入(inject)您的指令中。

然后使用 $interpolate($attrs.idsite)($scope.$parent) 获取值(字符串)。

http://plnkr.co/edit/zhBXyiz82EdmysLzeBNL?p=preview

(请注意，在我的 plnkr 中，我在范围设置中使用了 @。您可以删除它或保留它。使用 @ Angular 将为您执行插值并将值存储在指令的 $scope 对象中。)