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

时间:2017-02-04 04:00:12

标签: javascript angularjs angularjs-directive angularjs-scope angularjs-ng-transclude

我接手了我们的angularjs应用程序的前端工作,我被卡住了。

我一直在创建指令来替换膨胀的html,以便更新前端看起来更容易。一切顺利,直到我点击选举应用程序的投票页面。

指令传递param(无工作)

 <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,name,endDate等)截图:http://i.imgur.com/d6nbAsV.png

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

我真的是一个初学者,但是通过google,stackoverflow和大量的反复试验,我完成了工作......有点......

任何其他提示/建议也将受到高度赞赏

1 个答案:

答案 0 :(得分:2)

由于您在HTML上使用header来绑定HTML上的bindToController: true值,因此您应该在指令中添加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 }; ,以便所有隔离的范围绑定都可以在您的指令html中使用

<强>指令

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

指令用法

header

此外,您不应该startrow&amp;手动控制器内的#include <windows.h> #include <fstream> using namespace std; class C_SSF_Folder_Container; class C_SSF_Folder { public: private: C_SSF_Folder_Container cl_SSFFC_Folder_Container; public: }; #endif 变量赋值。删除这两个赋值部分可以使它工作。