0
Ich habe eine Winkelroute für die Bootstrap-Hauptmenüpunkte definiert. Ich habe eine andere Ansicht (HTML-Seite), die isteven multiselection-Direktiven implementiert. Wie ich es verstehe (Neuling mit eckigen und bootstrap), Controller sind aktiviert, wenn Routen ändern.Wie wird der Winkelbereich der Hauptansicht (index.html) und einer anderen untergeordneten Ansicht referenziert?
Wie kann ich veranlassen, dass der Child View Controller vom übergeordneten Controller ausgeführt wird?
EDIT
MAIN HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<link href='css/main.css' rel='stylesheet' type='text/css' />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="frainversegment" content="!" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15499108-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3982825388677642",
enable_page_level_ads: true
});
</script>
-->
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="#writers" class="glyphicon glyphicon-book"> Writers</a></li>
<li><a href="#enablers" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li>
<li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li>
<li><a href="#privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li>
<li><a href="#contact" class="glyphicon glyphicon-envelope"> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
<a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="update-profile" href="#update-profile">Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li>
</ul>
</div>
</div>
</nav>
<!--
<div class="google-ad-top">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-3982825388677642"
data-ad-slot="1133448516"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
-->
</header>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=writers.tryst.ron-tornambe.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=writers.tryst.ron-tornambe.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=writers.tryst.ron-tornambe.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=writers.tryst.ron-tornambe.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div>
<p id="message"></p>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<footer>
<div id="copyright">© 2016, Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/pages.js"></script>
<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#update-profile").on("click", function() {
sessionStorage.setItem("create-or-update", "update");
console.log("session-storage=" + sessionStorage.getItem("create-or-update"))
$("#create-account-link").trigger("click");
});
</script>
</body>
</html>
** Hauptcontroller - JS **
var wtApp = angular.module('wtApp', ['ngRoute'])
wtApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the writers page
.when('/writers', {
templateUrl: 'pages/writers.html',
controller: 'writersController'
})
// route for the enablers page
.when('/enablers', {
templateUrl: 'isteven.html.html',
controller: 'enablersController'
})
// route for privacy/rues
.when('/privacy', {
templateUrl: 'pages/privacy.html'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact pagefa
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
// route for the log-in page
.when('/log-in', {
templateUrl: 'pages/login.html',
controller: 'loginController'
})
// route for the create account
.when('/accounts', {
templateUrl: 'pages/accounts.html',
controller: 'createAccountController'
})
// route for manage uploads
.when('/manage-uploads', {
templateUrl: 'pages/manage-uploads.html'
})
});
// create the controller and inject Angular's $scope
wtApp.controller('mainController', function($scope) {
$scope.example2model = []; $scope.example2data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; $scope.example2settings = {displayProp: 'id'};
resetNavbar();
$("a[href$='']").css({color:'#FF5733'});
});
wtApp.controller('writersController', function($scope) {
resetNavbar();
$("a[href$='writers']").css({color:'#FF5733'});
});
wtApp.controller('enablersController', function($scope) {
$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 }
];
resetNavbar();
$("a[href$='enablers']").css({color:'#FF5733'});
});
wtApp.controller('aboutController', function($scope) {
resetNavbar();
$("a[href$='about']").css({color:'#FF5733'});
});
wtApp.controller('contactController', function($scope) {
resetNavbar();
$("a[href$='contact']").css({color:'#FF5733'});
});
wtApp.controller('loginController', function ($scope) {
resetNavbar();
$("a[href$='log-in']").css({ color: '#FF5733' });
});
wtApp.controller('createAccountController', function ($scope) {
resetNavbar();
$("a[href$='create-account']").css({ color: '#FF5733' });
});
wtApp.controller('ResetPasswordController', function ($scope) {
// $("a[href$='reset-pwd']").css({ color: '#FF5733' });
});
function resetNavbar() {
$(".navbar-collapse a").not("a[href='#']").each(function() {
$(this).css({ 'color': 'black' })
});
}
CHILD HTML und JS
<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">
<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 shown 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>
<div id="main" class="content"></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) {
$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/home/mail.png />", name: "Mail", ticked: false },
{ icon: "<img src=img/icons/pdf.png />", name: "PDF File", ticked: false }
];
});
</script>
</body>
</html>
Ich habe Code hinzugefügt. Können Sie ein Beispiel geben? –