无法将动态参数传递给 angular 指令

Question

我刚刚接手了我们 angularjs 应用程序的前端工作，但我被困住了。

我一直在创建指令来替换臃肿的 html 以使更新前端看起来更容易。一切都很顺利，直到我点击了我们选举应用程序的投票页面。

指令传递参数（none 有效）

 <div block-container header="vm.electionToVote.name" startrow="'false'">
 <div block-container header="'vm.electionToVote.name'" startrow="'false'">
 <div block-container header="{{vm.electionToVote.name}}" startrow="'false'">

通常这些工作

<div block-container header="'Elections List'">
<div block-container header="vm.full.title" startrow="'false'">

指令html<h3>{{style.header}}</h3>

指令

.directive('blockContainer', blockContainer);
    /* @ngInject */
    function blockContainer() {
        var directive = {
            scope: {
                header: '=',
                startrow: '='
            },
            replace: true,
            transclude: true,
            controller: blockContainerCtrl,
            controllerAs: 'style',
            templateUrl: 'app/style/directives/blockContainer.tpl.html',
            restrict: 'A'
        };
        return directive;
        function blockContainerCtrl($scope) {
            //debugger;
            var vm = this;
            vm.header = $scope.header;
            vm.startrow = angular.isDefined($scope.startrow) ? $scope.startrow : 'true';
        }
    }

运行调试显示 vm.electionToVote 未定义，但 ng-inspector 显示它有内容（id、名称、结束日期等）屏幕截图：http://i.imgur.com/d6nbAsV.png

您可以在此处查看所有（包括选举）文件：https://plnkr.co/edit/bPVp8QY0xzlJ6aWZoRDi?p=preview

我真的是一个 angualjs 初学者，但是有了 google、Whosebug 和大量的反复试验，我正在完成工作……有点……

任何其他 tips/advice 也将不胜感激

Answer 1

由于您在 HTML 上使用 style.header 绑定 HTML 上的 header 值，您应该在指令中添加 bindToController: true 以便所有独立范围绑定将在您的指令中可用 html.

指令

var directive = {
    scope: {
        header: '=',
        startrow : '='
    },
    replace: true,
    transclude: true,
    controller: blockContainerCtrl,
    controllerAs: 'style',
    templateUrl: 'app/style/directives/blockContainer.tpl.html',
    restrict: 'A',
    bindToController: true //<-- Added this line
};

指令用法

<div block-container header="vm.electionToVote.name" startrow="'false'">

此外，您不应在控制器内部手动执行 header 和 startrow 变量分配。删除这两个分配部分将使其工作。

无法将动态参数传递给 angular 指令

can't pass dynamic parameter to angular directive

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-transclude