Question

<div ng-app="myApp" ng-controller="controller"  class="cell-list-box">
    <div >
        <button ng-click="changeArrayFun(1)">array1Button</button>
        <button ng-click="changeArrayFun(2)">array2Button</button>
    </div>
    <ul class="cell_list_ul">
        <li ng-repeat="item in show_array" class="cell_list">
            <div class="course_cell">
                <div class="img_box">
                    <a ng-if="item.course != 'course'&&item.coursetype ==1 "
                       target="_blank">
                        <div style="background-color: yellow; width: 20px; height: 20px" ></div>
                    </a>
                    <a ng-if="item.works_oldid"
                       target="_blank">
                        <div style="background-color: red; width: 20px; height: 20px" ></div>
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>
<script src="../angular.js"></script>
<script>

    var ngmodule = angular.module('myApp',[]);
    ngmodule.controller('controller', ['$scope', function ($scope) {
        var array1 = [
            {
                "type":"coursewarp",
                "coursetype":1,
            },
        ];

        var array2 = [
            {
                "ID":3194892,
                "courseid":"0",
                "taskid":34,
                "works_oldid":"585be116e9c7a87881571958",
            }
        ];

        $scope.changeArrayFun = function (number) {
            if(number === 1){
                $scope.show_array = array1;
            } else  {
                $scope.show_array = array2;
            }
        }

    }]);

</script>

如果我在HTML中编写所有代码。当我点击Button1时，会显示yellow box。当我点击Button2时，会显示red box。代码工作得很好。我使用Angular组件来编写一个＆＃34; cell＆＃34;零件。如果我将cell代码插入＆＃34;单元格＆＃34;组件，代码不起作用。

组件templateUrl：

<div class="course_cell">
    <div class="img_box">
        <a ng-if="item.course != 'course'&&item.coursetype ==1 "
           href="{{root_path}}/libs/v1/column/column.html?wrap_id={{item.wrap_id}}"
           target="_blank">
            <div style="background-color: yellow; width: 20px; height: 20px" ></div>
        </a>
        <a ng-if="item.works_oldid"
           target="_blank">
            <div style="background-color: red; width: 20px; height: 20px" ></div>
        </a>
    </div>
</div>

我的组件js（test_cell.js）：

function courseCellFactoryFun( app_name, root_path,api_set ) {

    function courseCellComponentFun() {
        var ctrl = this;

        console.log(ctrl.cellData);
    }

    angular.module(app_name).component('courseCell', {
        templateUrl:root_path + '/test_cell.html',
        controller:courseCellComponentFun,
        bindings:{
            cellData:'='
        }
    })
}

身体会改变：

<ul class="cell_list_ul">
    <li ng-repeat="item in show_array" class="cell_list">
        <course-cell cell-data="item"></course-cell>
    </li>
    </ul>

我在body的末尾添加了以下代码。

<script src="./testCell/test_cell.js"></script>
<script>
    courseCellFactoryFun('myApp','./testCell');
</script>

testCell是我的组件文件夹。然后我运行演示，当我点击按钮时，colorBox没有显示。

Answer 1

Angular 1.5+中组件中控制器的默认命名是“$ ctrl”，因此在从模板访问数据和函数时必须加上前缀，例如：：

<div class="course_cell">
    <div class="img_box">
        <a ng-if="$ctrl.item.course != 'course' && $ctrl.item.coursetype ==1 "
...

Angular1.5.8，该组件不起作用

1 个答案: