Question

我正在尝试学习API（我也查阅了它的含义，并且它不是页面上的一小块区域，它被编程为以其编码的功能运行（例如，您在其中设置闹钟并在特定时间响铃的方框，正确吗？））https://www.barkbox.com/subscribe/size。

我知道它在Angular JS中，我甚至研究Angular UI路由器。我知道你可以编程链接转到另一个页面而无需重新加载页面，这与我想要的类似。例如，ui-sref="home"将从home.html调用代码。此外，在ngRoute方法中，您使用a href="#about"来调用about.html中的代码。但是我在这个链接中看不到我提供的链接。

我认为使这个barkbox应用程序工作的唯一线索是ng-click="setSize('squee')"。我认为它的作用是设置框的大小并将整个框链接到另一个页面，并以某种方式使用此代码或类似的东西：

// app.js
var routerApp = angular.module('dogApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit       
        });

});

我从学习https://scotch.io/tutorials/angular-routing-using-ui-router和https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating中学到了很多东西。但我还没有在https://github.com/angular-ui/ui-router学习更多。

尽管如此，我还是试图理解setSize函数以及ng-click，就像它们如何链接到另一个页面一样。我试图查找它，但无法找到有关该信息及其与ng-click或类似内容的关联....任何帮助或建议都表示赞赏。

---------------更新---------------------- 好的，我制作了代码。您可以在http://hamzakhan.name/dev/eric/options/dogsubscription.html#/dogs

看到它

html代码是

<div class="optionwrapper size">
                <div class="option" ng-click="setSize('one')">
                    <div class="numberimage1"></div>
                    <div class="numbercontent">
                        <div class="numbertitle">One</div>
                    </div>
                    <div class="icon-chevron-right"><i class="fa fa-angle-right fa-3x"></i></div>
                </div>
            </div>
            <div class="optionwrapper size">
                <div class="option" ng-click="setSize('two')">
                    <div class="numberimage2"></div>
                    <div class="numbercontent">
                        <div class="numbertitle">Two</div>
                    </div>
                    <div class="icon-chevron-right"><i class="fa fa-angle-right fa-3x"></i></div>
                </div>
            </div>

和javascript代码

angular.module('dogApp', ['ui.router'])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

     $stateProvider

        // route to show our basic form (/form)
        .state('dogs', {
            url: '/dogs',
            templateUrl: 'dogs.html',
            controller: 'dogController'
        })

        // nested states 
        // each of these sections will have their own view


    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/dogs');

})

// our controller for the form
// =============================================================================
.controller('dogController', function($scope) {

    // we will store all of our form data in this object
    $scope.dogData = {};

    // url will be nested (/dogs-oneage)
        $scope.setSize = function(one) {
             //url: '/oneage',
            templateUrl: 'dogs-oneage.html'
        }
        // url will be nested (/dogs-twoage)
        $scope.setSize = function(two) {
             //url: '/twoage',
            templateUrl: 'dogs-twoage.html'
        }
        // url will be nested (/dogs-threeage)
        $scope.setSize = function(three) {
             //url: '/threeage',
            templateUrl: 'dogs-threeage.html'
        }
        // url will be nested (/dogs-fourage)
        $scope.setSize = function(four) {
             //url: '/fourage',
            templateUrl: 'dogs-fourage.html'
        }
        // url will be nested (/dogs-fiveage)
        $scope.setSize = function(five) {
             //url: '/fiveage',
            templateUrl: 'dogs-fiveage.html'
        }

    // function to process the form
    $scope.processForm = function() {
        alert('Congratulations! You have finished the first part! Please complete the second part to finish registering.');
    };

});

但无论如何，我都无法将框链接到另一页...... :(

Answer 1

这是控制器中函数的名称。

Answer 2

基本上ng-click是：'当你点击这里时，这个函数将被调用'。因此，当您单击<div>或<a>时，将调用函数setSize（）。 'squee'是传递给函数的参数。该函数所执行的操作是在为特定页面/页面部分实例化的控制器中编写的。您应该查找类似于$scope.setSize = function(param) {}

的代码

回答您的更新代码：

您可以在控制器中添加$ location。一个例子如下：

routerApp.config(['$routeProvider', function($routeProvider) {

    $routeProvider
        .when('/one', {
            templateUrl: '<*the complete link to your html file*>'
        })
         .when('/two', {
            templateUrl: '<*the complete link to your html file*>'
        })
        .otherwise({
             redirectTo: '/home',
            templateUrl: '<*the complete link to your html file*>'
        });
 }])
.controller('dogController',['$scope', '$location', function($scope, $location) {
    $scope.goTo = function(url) {
        $location.path(url);
    }
}

然后你的HTML：

<div class="optionwrapper size">
            <div class="option" ng-click="goTo('/one')">
                <div class="numberimage1"></div>
                <div class="numbercontent">
                    <div class="numbertitle">One</div>
                </div>
                <div class="icon-chevron-right"><i class="fa fa-angle-right fa-3x"></i></div>
            </div>
        </div>
        <div class="optionwrapper size">
            <div class="option" ng-click="goTo('/two')">
                <div class="numberimage2"></div>
                <div class="numbercontent">
                    <div class="numbertitle">Two</div>
                </div>
                <div class="icon-chevron-right"><i class="fa fa-angle-right fa-3x"></i></div>
            </div>
        </div>

这里会发生什么：您告诉您的应用，当网址与“.com / one”匹配时，它会打开模板一。您的div现在有ng-click=goTo('/one')，然后有$location.path，它会指向网址“.com / one”。

您希望在本教程中使用的setSize（）方法是一个名称，您可以将其更改为您想要的任何名称。在教程中它可能被称为setSize，因为它调整了某些东西的大小。在这里我将它重命名为goTo（），因为你想要去某个网址。有了这个代码，我提供了你应该能够管理并让它现在正常工作:-)祝你好运！

什么是ng-click中的setSize？

2 个答案: