我是一个角度新手使用多选择指令从isteven
我写了一个test case,从根文件夹中的HTML可以很好地工作,但是当我将它合并到my app中时,没有一个下拉列表是可见的。
没有console.log错误消息。
我将HTML和控制器捆绑到同一个文件中。
“myApp.controller('MainCtrl',function($scope,$http)”不会执行,尽管“var myApp=angular.module(”myApp“,[”isteven multi select“]);”会执行。

<html data-ng-app="myApp" id="myApp" lang="en">
    <head>
        <title>Writer's Tryst - Enablers Form</title>
        <link type="text/css" href="css/enablers.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/isteven-multi-select.css">
    </head>
    <body data-ng-controller="MainCtrl">
        <div class="container center_div">
            <!--<form id="form-writers" class="form-horizontal well">-->
            <img id="img-enablers" src="#" alt="images" />
            <form id = "form-enablers"  class="form-horizontal well">
                <h1>Enablers</h1>

                <label for="work-type" class="fixed50">Type:</label>
                <p id="work-type"
                    data-isteven-multi-select
                    data-input-model="worktype"
                    data-output-model="outputWorktype"
                    data-button-label="icon name"
                    data-item-label="icon name"
                    data-tick-property="ticked"
                ></p>
                <label for="form-type" class="fixed50">Form:</label>
                <p id="form-type"
                    data-isteven-multi-select
                    data-input-model="formtype"
                    data-output-model="outputFormtype"
                    data-button-label="name"
                    data-item-label="name"
                    data-tick-property="ticked"
                ></p>
                <p>For an explanation of the genres s   hown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
                <label for="genres" class="fixed50">Genres:</label>
                <p id="genres"
                    data-isteven-multi-select
                    data-input-model="genres"
                    data-output-model="outputGenres"
                    data-button-label="name"
                    data-item-label="name"
                    data-tick-property="ticked"
                ></p>
                <label for="accepted-media" class="fixed50">Accepted Media:</label>
                <p id="accepted-media"
                    data-isteven-multi-select
                    data-input-model="acceptedMedia"
                    data-output-model="outputMedia"
                    data-button-label="icon name"
                    data-item-label="icon name"
                    data-tick-property="ticked"
                ></p>
                <p> <label for="special-instructions" class="fixed50">Special Instructions</label>
                    <textarea id ="special-instructions" name="special-instructions">
                    </textarea>
                </p>
                <p>For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
                <div id="recaptcha-elements"></div>
                <div class="form-group">
                    <button type="submit" id="enablers-search" class="btn btn-default glyphicon glyphicon-search"> Search</button>
                </div>
                <input id="userid" name="userid" type="hidden" />
            </form>
        </div>
        <form id="writers-list">
            <p>To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
            <div id="table-list"></div>
        </form>
        <script src="js/isteven-multi-select.js"></script>
        <script src="js/enablers.js"></script>
        <script src="js/recaptcha.js"></script>
        <script>
        var myApp = angular.module( "myApp", [ "isteven-multi-select" ]);

        myApp.controller('MainCtrl', function ($scope, $http) {
            alert("got here");
            $scope.worktype = [
                { icon: "<img src=img/icons/smile-mask.png />", name: "Fiction", ticked: false },
                { icon: "<img src=img/icons/frown-mask.png />", name: "Non-Fiction", ticked: false }
            ];
            $scope.formtype = [];
            var data = {};
            data.action = 'multiselect-forms';
            ajax('post', 'php/enablers.php', data, formsSuccess, 'Error retrieving multiselect forms data: ');
            function formsSuccess(data) {
                console.log(data);
                $scope.formtype = eval(data);
            }
            $scope.genres = [];

            data.action = 'multiselect-genres';
            ajax('post', 'php/enablers.php', data, genresSuccess, 'Error retrieving multiselect forms data: ');
            function genresSuccess(data) {
                console.log(data);
                $scope.genres = eval(data);
            }
            $scope.acceptedMedia = [
                { icon: "<img src=img/icons/email.png />", name: "Mail", ticked: false },
                { icon: "<img src=img/icons/pdf.png />", name: "PDF File", ticked: false }
            ];

    /*
    $http({
    method: "POST",
    url: "php/enablers.php",
    params: data,
    contentType: 'text'
    }).then(function mySucces(response) {
    console.log(response.data);
    //        $scope.formtype = response.data;
    }, function myError(response) {
    $scope.FORMTYPE = response.statusText;
    });
    */
})

        </script>
    </body>                           s
</html>

注意,我之所以使用jQuery Ajax,是因为angular一直在JSON上插入内容,即使来自PHP interace指定的text/plain内容类型以及http调用指定的content type='text'
菲律宾比索
<?php
require_once 'dbconnect.php';

function isEmpty($str) {
    return strlen(trim($str)) == 0;
}
function buildInStmt($array)
{
    if (is_array($array)) {
        $in = implode(',', $array);
    } else $in = "'" . $array . "'";
    return $in;
}
function multiselectGenres()
{
    try {

        $dbh = connect2DB();
        $stmt = $dbh->prepare("SELECT ID, Genre FROM Genres ORDER BY Genre");
        if (!$stmt->execute()) {
            echo "\nPDOStatement::errorCode(): ";
            print $stmt->errorCode();

            print_r($dbh->errorInfo());
        } else {
            $select = "[";
            $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
            foreach ($rows as $row) {
                $genre = $row['Genre'];
                $id = $row["ID"];
                $select .= "{";
                $select .= 'name: ';
                $select .= '"' . $genre . '",';
                $select .= 'ticked: false},';
            }
            $select = substr($select, 0, -1) . "]";
        }
        header("Content-Type: text/plain");
        echo $select;
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
    }
}
function multiselectForms() {
    try {
        $dbh = connect2DB();
        $stmt = $dbh->prepare("SELECT ID, Form FROM Forms ORDER BY Form");
        $stmt->execute();
        $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $select = "[";
        foreach ($rows as $row) {
            $id = $row['ID'];
            $form = $row['Form'];
            $select .= "{";
            $select .= 'name: ';
            $select .= '"' . $form . '",';
            $select .= 'ticked: false},';
        }
        $select = substr($select, 0, -1) . "]";
        header("Content-Type: text/plain");
        echo $select;
    } catch (PDOException $e) {
        echo 'Database error: ' . $e->getMessage();
    } catch (Exception $e) {
        echo 'General failure: ' . $e->getMessage();
    }
}

function search() {
    try{
        /*
        if (!isset($_REQUEST["work-type"]) || isEmpty($_REQUEST["work-type"]))
            throw new Exception('You must select a type of work.');
        else {
            $worktype = filter_var(trim($_REQUEST["work-type"]), FILTER_SANITIZE_STRING);
            $worktype = htmlspecialchars_decode($worktype, ENT_QUOTES);
        }
        */
        manageEnablerData();
        if (!isset($_REQUEST["userid"]) || isEmpty($_REQUEST["userid"])) {
            throw new Exception('A user-id must be supplied.');
        }
        $userid = $_REQUEST["userid"];
        if (!isset($_REQUEST["form-type"]) || empty($_REQUEST["form-type"])) {
            throw new Exception('You must select a form type.');
        }
        $forms = buildInStmt($_REQUEST["form-type"]);

        if (!isset($_REQUEST["genre"]) || empty($_REQUEST["genre"])) {
            throw new Exception('You must select a genre.');
        }
        $genres = buildInStmt($_REQUEST["genre"]);
        /*
        if (!isset($_REQUEST["sub-genre"]) || isEmpty($_REQUEST["sub-genre"]))
            throw new Exception('You must select a sub-genre.');
        else {
            $subgenre = filter_var(trim($_REQUEST["sub-genre"]), FILTER_SANITIZE_STRING);
            $subgenre = htmlspecialchars_decode($subgenre, ENT_QUOTES);
        }
        */
        $dbh = connect2DB();
        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $dbh->prepare("SELECT a.ID, a.Email, a.Name, w.Title, w.Filename FROM Writers w JOIN Accounts a ON a.ID = w.fkAccounts WHERE a.ID = :userid AND  FormType IN($forms) AND Genre IN($genres)");
        $stmt->bindParam(':userid', $userid, PDO::PARAM_INT);
        $stmt->execute();
        $rows = $stmt->fetchAll();
        $table = '<table><tr><th>Author</th><th>Title</th><th>Synopsis</th><th><img src="img/Thumb-up-icon.png" width="32" alt="thumbs-up" </th></tr>';
        foreach ($rows as $row) {
            $table .= "<tr><td>" . $row['Name'] . "</td><td>" . $row['Title'] . "</td><td>" . "<a href='uploads/" . $row['Filename'] . "' target=_blank>synposis file</a>" . "</td><td><input type='checkbox' id='request-manuscript' name='request-manuscript'"  . "</td><td class='hidden'>" . $row['ID'] . "</td><td class='hidden'>" . $row['Email'] . "</td></tr>";
        }
        $table .= "</table>";
        echo $table;

    } catch (PDOException $e) {
        echo 'Database error: ' . $e->getMessage();
    } catch (Exception $e) {
        echo 'General error: ' . $e->getMessage();
    }

}
function manageEnablerData()
{   $si = ""; //special-instructions
    if (isset($_REQUEST["special-instructions"]) && !isEmpty($_REQUEST["special-instructions"])) {
        $si = filter_var(trim($_REQUEST["special-instructions"]), FILTER_SANITIZE_STRING);
        $si = htmlspecialchars_decode($si, ENT_QUOTES);
    }

    if (!isset($_REQUEST["userid"]) || isEmpty($_REQUEST["userid"])) {
        throw new Exception('A user-id must be supplied.');
    }
    $userid = $_REQUEST["userid"];
    /*
    if (!isset($_REQUEST["accepted-media"]) || empty($_REQUEST["accepted-media"])) {
        throw new Exception('An accepted media must be entered.');
    }
    $acceptedMedia = buildInStmt($_REQUEST["accepted-media"]);
    */
    $dbh = connect2DB();
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $dbh->prepare("INSERT Enablers(fkAccounts, SpecialInstructions) VALUES(:fka, :si) ON DUPLICATE KEY UPDATE fkAccounts=VALUES(fkAccounts), SpecialInstructions=VALUES(SpecialInstructions)");
    $stmt->bindParam(':fka', $userid, PDO::PARAM_INT);
    $stmt->bindParam(':si', $si, PDO::PARAM_STR);
    $stmt->execute();
    //need to handle AcceptedMedia
}
//var_dump($_REQUEST);exit();
if (!isset($_REQUEST['action'])  || isEmpty($_REQUEST['action']))
    throw new Exception('Programmer error: action not posted.');
else {
    $action = $_REQUEST['action'];
    switch($action) {
    case 'search':
        search();
        break;
    case 'select':
        select();
        break;
    case 'multiselect-genres':
        multiselectGenres();
        break;
    case 'multiselect-forms':
        multiselectForms();
        break;
    default:
        throw new Exception("Unknown action: " . $action);
        break;
    }
}

?>

如果你认为我应该被否决,请帮助我理解我做错了什么,这样我就能从错误中吸取教训。

最佳答案

一。为什么不工作:
一个)。在您的测试用例中,您已经将<body data-ng-controller="MainCtrl">放在html中,这将调用MainCtrl函数。
(第二章)。在你的应用程序中,你也有一个MainCtrl,但是你既没有从html调用也没有$routeProvider.when
解决:
1)。最简单的方法:在你的应用中做<body data-ng-controller="MainCtrl">,和你的测试用例一样。
(第二章)。将MainCtrl中的代码放入enablersController中。如果需要,请在#/enablers页中选择输入模型。
两者都是猜测,如果有什么问题请告诉我。

10-04 22:07