0
我在AngularJS中真的很新,但我必须使用它创建一个web应用程序,我有一些输入控制元素(宽度,高度,名称,描述和颜色)的样式我的HTML的左侧。我曾经隐藏过所有的元素,当用户点击它并且一切正常时,现在我开始使用ui-router,如果你点击'全屏',它会调用这个html文件。一些输入工作,除了我定义的初始范围值。数据绑定不更新Angular JS
我离开了一个沉睡者,所以你可以对发生了什么有一个想法。
http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview
主HTML:
<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
<meta charset="UTF-8">
<title>ChatBuilder</title>
<!-- Adding Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/colpick.css">
</head>
<body ng-controller="myCtrl">
<div >
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div>
<h3>Select your chat</h3>
<a ui-sref="fullscreen">Fullscreen</a>
<a ui-sref="chatbanner">ChatBanner</a>
<h3>Set your chat options</h3>
<label>Name:</label> <br>
<input type="text" ng-model="chatName" > <br>
<p>{{chatName}}</p>
<label>Description:</label> <br>
<input type="text" ng-model="chatDes" > <br>
<label>Width:</label> <br>
<input type="text" ng-model="myWidth"> <br>
<label>Height:</label> <br>
<input type="text" ng-model="myHeight"> <br>
<h3>Style your chat</h3>
<label>Header background:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
<label>Text color header:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColor"> <br>
<label>Text color description:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColordes"> <br>
<h3>Social media</h3>
<p>Want to add social media?</p>
<input type="checkbox" ng-model="showsocialpanel"/>
<label>Yes</label>
<input type="checkbox"/>
<label>No</label> <br/>
<div ng-show="showsocialpanel">
<h3>Style your footer:</h3>
<label>Powered By:</label> <br/>
<input type="text" ng-model="poweredBy"/> <br/>
<label>Your background footer:</label> <br/>
<input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>
<h3>Add your social</h3>
<input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
<input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
<br/>
<input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
<input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
<br/>
<input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
<input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>
</div>
</div>
</div>
<div class="col-lg-10">
<div ui-view></div>
</div>
</div>
</div>
的全屏HTML:
<div id="chat_box" ng-style="{width:myWidth}">
<div id="chat_top">
<div id="chat_avatar">
</div>
<div id="chat_header" ng-style="{background: myBackground}">
<h4 ng-style="{color:myColor}">{{chatName}}</h4>
<p ng-style="{color:myColordes}">{{chatDes}}</p>
</div>
</div>
<div id="chat_container">
<div id="history_div" ng-style="{height:myHeight}">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" rows="0"
type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>
<div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
<ul>
<li ng-show="facebookiconshow">
<a ng-href="{{facebooklink}}" target="_blank">
<img src="assets/img/facebook.png" alt="Facebook Icon"/>
</a>
</li>
<li ng-show="twittericonshow">
<a ng-href="{{twitterlink}}" target="_blank">
<img src="assets/img/twitter.png" alt="Twitter Icon"/>
</a>
</li>
<li ng-show="linkediniconshow">
<a ng-href="{{linkedinlink}}" target="_blank">
<img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
</a>
</li>
</ul>
</div>
</div>
</div>
的JS:
var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('fullscreen', {
url: "/fullscreen",
templateUrl: "fullscreen.html",
controller:"myCtrl"
})
})
bmiChatbuilder.controller('myCtrl', function ($scope) {
$scope.chatName = 'Type your text tittle here';
$scope.chatDes = 'Type your description here';
$scope.myWidth = '800px';
$scope.myHeight = '400px';
})
在此先感谢您的帮助。
对于如何使用工厂方法在同一个控制器上共享数据仍然有点困惑,请您提供一个链接来理解这一点。 – Alex 2014-10-01 16:53:24
非常感谢您使用工厂方法解决此问题:) – Alex 2014-10-01 17:41:18