不能将动态参数传递给角指令

I just took over the frontend work of our angularjs apps and I'm stuck.

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

I've been creating directives to replace bloated html to make updating the frontend look easier. All was going well till I hit the voting page of our elections app.

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

directive passing param (none work)

指令传递参数(不工作)

 <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'">

usually these work

通常这些工作

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

directive html <h3>{{style.header}}</h3>

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

directive

指令

.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';
        }
    }

running debug shows that vm.electionToVote is undefined but ng-inspector shows that is has stuff (id, name, endDate etc) screenshot: http://i.imgur.com/d6nbAsV.png

运行debug将显示该vm。electionToVote没有定义，但是ng-inspector显示它有东西(id, name, endDate等)的屏幕截图:http://i.imgur.com/d6nbAsV.png

you can see all (including election) files here: https://plnkr.co/edit/bPVp8QY0xzlJ6aWZoRDi?p=preview

您可以在这里看到所有(包括选择)文件:https://plnkr.co/edit/bp8qy0xzlj6awzordi?

I'm really an angualjs beginner, but with google, * and a lot of trial and error, I'm getting the job done... sort of...

我真的是一个语言初学者，但是有了谷歌、*和大量的尝试和错误，我的工作就完成了……一种……

any other tips/advice would be greatly appreciated as well

如有其他建议，我们将不胜感激

1 个解决方案

#1

As you have used style.header on HTML to bind header value on HTML, you should add bindToController: true in your directive so that all the isolated scope bindings will be available inside your directive html.

正如你所使用的风格。在HTML的标题上，你应该添加bindToController: true在你的指令中，这样所有隔离的作用域绑定都可以在你的指令HTML中得到。

Directive

指令

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
};

Directive Usage

指令的用法

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

Additionally you should not be doing header & startrow variable assignment inside controller manually. Removing those two assignment part would make it work.

此外，不应该在控制器内手动执行header和startrow变量赋值。去掉这两个赋值部分就可以了。

#1