0
<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>
Wenn ich den gesamten Code in meinem HTML schreiben. Wenn ich auf den Button1 klicke, wird yellow box angezeigt. Wenn ich auf Button2 klicke, wird red box angezeigt. Der Code funktioniert gut. Ich verwende die Angular-Komponente, um eine "Zellen" -Komponente zu schreiben. WENN ich den Code cell in die Zelle "Zelle" einfügen, funktioniert der Code nicht.Angular1.5.8, funktioniert die Komponente nicht
Die Komponente 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>
meine Komponente 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:'='
}
})
}
Der Körper wird sich ändern:
<ul class="cell_list_ul">
<li ng-repeat="item in show_array" class="cell_list">
<course-cell cell-data="item"></course-cell>
</li>
</ul>
ich den Code unten am Ende hinzufügen von die body.
<script src="./testCell/test_cell.js"></script>
<script>
courseCellFactoryFun('myApp','./testCell');
</script>
testCell ist meine Komponente Ordner. Dann starte ich die Demo, wenn ich auf die Schaltfläche klicke, wird colorBox nicht angezeigt.