Angular自定义指令传参异常：渲染内容为空

嘿，我一眼就瞅出问题所在了——你踩了AngularJS隔离作用域和HTML属性命名的坑！DOM能生成但内容为空，核心原因是HTML属性不区分大小写，导致你定义的隔离作用域属性和HTML里的绑定不匹配，参数根本没传进去。

问题根源 #

当你在HTML里写 <task Status="task.Status"> 时，浏览器会自动把属性名转换成全小写的 status，但你的指令隔离作用域里定义的是 Status（大写开头），这俩完全对应不上，AngularJS没法把值绑定到指令的作用域里，自然渲染出来就是空的。

修复方案（两种可选） #

方案一：统一使用小写属性名（最直观）

先修改指令的隔离作用域定义，把所有大写开头的属性改成小写：

(function () { 
    "use strict"; 
    angular.module("directives", []) 
    .directive("task", task); 

    function task() { 
        return { 
            scope: { 
                status: "=", 
                assignment: "=", 
                assignee: "=" 
            }, 
            restrict: "E", 
            templateUrl: "/Content/partials/task.html" 
        }; 
    } 
}());

然后修改指令模板里的绑定表达式，对应改成小写：

<div> 
    <span class="assignment">{{ assignment }}</span> 
    <span class="assignment">{{ assignee }}</span> 
    <button class="btn btn-primary" ng-click="backTask($event, task)">Back</button> 
    <button class="btn btn-primary" ng-click="advanceTask($event, task)">Next</button> 
</div>

最后修改使用指令的HTML代码，用小写的属性名：

<li ng-repeat="task in tasks | filter:{Status: 0}"> 
    <task status="task.Status" assignment="task.Assignment" assignee="task.Assignee"></task>
</li>

方案二：遵循AngularJS的驼峰转短横线规范（更符合框架惯例）

AngularJS支持把HTML中的短横线分隔属性自动转换成驼峰命名的作用域属性。比如你在指令里定义 taskStatus: "="，HTML里就可以写 task-status="task.Status"。

修改指令：

(function () { 
    "use strict"; 
    angular.module("directives", []) 
    .directive("task", task); 

    function task() { 
        return { 
            scope: { 
                taskStatus: "=", 
                taskAssignment: "=", 
                taskAssignee: "=" 
            }, 
            restrict: "E", 
            templateUrl: "/Content/partials/task.html" 
        }; 
    } 
}());

修改模板里的绑定：

<div> 
    <span class="assignment">{{ taskAssignment }}</span> 
    <span class="assignment">{{ taskAssignee }}</span> 
    <button class="btn btn-primary" ng-click="backTask($event, task)">Back</button> 
    <button class="btn btn-primary" ng-click="advanceTask($event, task)">Next</button> 
</div>

修改使用指令的HTML：

<li ng-repeat="task in tasks | filter:{Status: 0}"> 
    <task task-status="task.Status" task-assignment="task.Assignment" task-assignee="task.Assignee"></task>
</li>

额外提醒：按钮点击事件的问题 #

顺便说一句，你模板里的 backTask 和 advanceTask 方法现在在指令的隔离作用域里是不存在的，点击按钮不会有任何反应。你需要在指令里添加控制器或者link函数来定义这些方法，比如：

function task() { 
    return { 
        scope: { 
            status: "=", 
            assignment: "=", 
            assignee: "=" 
        }, 
        restrict: "E", 
        templateUrl: "/Content/partials/task.html",
        controller: function($scope) {
            // 定义回退任务的方法
            $scope.backTask = function(event, task) {
                console.log("回退任务:", task);
                // 这里写你的业务逻辑
            };
            // 定义推进任务的方法
            $scope.advanceTask = function(event, task) {
                console.log("推进任务:", task);
                // 这里写你的业务逻辑
            };
        }
    }; 
}

内容的提问来源于stack exchange，提问作者Danyx