Question

我是AngularJS的新手，但我必须使用它创建一个Web应用程序，我有一些输入可以控制HTML左侧的元素样式（宽度，高度，名称，描述和颜色）。我曾经隐藏了所有元素，当用户点击它出现并且一切正常时，现在我开始使用ui-router，如果你点击“全屏”＆＃39;它将调用该html文件。除了我定义初始范围值之外，一些输入有效。

我留下了一名傻瓜，这样你就可以知道发生了什么。

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';
})

提前感谢您的帮助。

Answer 1

路由器使用它自己的范围创建新的myCtrl实例。您可以创建服务以在两个控制器之间共享数据，或为/ fullscreen创建另一个控制器类型。

数据绑定不会更新Angular JS

1 个答案: