为什么我的“ng-click”和“ng-show”需要我传递控制器别名以及正在传递的函数

Why are my 'ng-clicks' and 'ng-shows' requiring I pass the controller alias along with the function being passed?

本文关键字：别名函数控制器 ng-click 我的 ng-show 为什么更新时间：2023-09-26

对不起，如果这很愚蠢，但我对Angular很陌生。

为什么 ng-click（和 ng-show，但没有函数）要求我将控制器名称与被调用的函数一起传递？

我的代码有效，我只是想知道如果我不使用"timeTrackerCtrl.something"，为什么有些事情不起作用？这是我的代码：

索引.html

<!DOCTYPE html>
<html ng-app="timeTrackerApp">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-controller="TimeTrackerController as timeTrackerCtrl">
        <!--  Task Form Container  -->
        <div>
            <!--  Task Form  -->
            <div>
                <form name="taskForm" ng-submit="timeTrackerCtrl.addTask(tempTask)">
                    <input ng-model="timeTrackerCtrl.tempTask.name" required type="text" placeholder="what are you working on?" title="Task Name" />
                    <select ng-model="timeTrackerCtrl.tempTask.project" ng-options="project.name as project.name for project in timeTrackerCtrl.projects"  title="name">
                        <option value="">+ project</option>
                    </select>
                    <input type="submit" value="&#9654;" />
                </form>
            </div>
        </div>
        <!--  Tasks Container -->
        <div id="taskContainer">
            <!--  Live Preview -->
            <div class="taskLine" ng-show="timeTrackerCtrl.tempTask.name">
                <div class="date"><p>{{timeTrackerCtrl.today | date:'d MMM'}}</p></div>
                <div>
                    <div ng-show="timeTrackerCtrl.tempTask.star" ng-click="timeTrackerCtrl.tempTask.star = false" class="star activeStar">&#9733;</div>
                    <div ng-hide="timeTrackerCtrl.tempTask.star" ng-click="timeTrackerCtrl.tempTask.star = true" class="star">&#9734;</div>
                    <div class="taskName">{{timeTrackerCtrl.tempTask.name}}</div>
                    <div><span ng-show="timeTrackerCtrl.tempTask.project != null" class="projectBlock">{{timeTrackerCtrl.tempTask.project}}</span></div>
                    <div ng-repeat="tag in timeTrackerCtrl.tempTask.tags track by $index" class="tagBlock">{{tag}}</div>
                </div>
            </div>
            <div ng-repeat="task in timeTrackerCtrl.tasks">
                <div ng-show="task.timing" ng-click="timeTrackerCtrl.taskEnd(task.end);"></div>
                <div>{{task.name}}</div>
                <div>{{task.project}}</div>
                <div ng-repeat="tag in task.tags track by $index">{{tag}}</div>
                <div>{{task.end ? timeTrackerCtrl.finalTime(task.start,task.end) : 'currentTime'}}</div>
            </div>
        </div>
    </body>
</html>

应用.js

(function() {
    var app = angular.module('timeTrackerApp', []);
    app.controller('TimeTrackerController', function() {
        this.tasks = taskObjects;
        this.projects = projectsInfo;
        this.today = Date.now();
        this.tempTask = {};
        this.addTask = function() {
            this.tempTask.star = false;
            this.tempTask.start = Date.now();
            this.tempTask.timing = true;
            this.tasks.push(this.tempTask);
            this.tempTask = {};
        };
        this.taskEnd = function(taskend) {
            taskend = Date.now();
            alert(taskend);
            return taskend;
        };
        this.finalTime = function(starttime,endtime) {
            totalTime = endtime - starttime;
            return totalTime;
        };
    });
    var projectsInfo = [
        {
          ...
        }, {
          ...
        }
    ];
    var taskObjects = [
        {
          ...
        }, {
          ...
        }
    ];
})();

你应该

为此使用$scope。

我建议你看看Dan Wahlin的"AngularJS基础"。这是一个非常好的教程。