Как повторно отобразить вложенные представления [дублировать]

<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>
1
задан SoftTimur 19 February 2017 в 17:07
поделиться

2 ответа

Легкое совместное использование одних и тех же данных между различными представлениями с помощью factories ( заводской документации AngularJS ). Попробуйте этот пример , он использует простую фабрику с именем myFactory для обмена данными между контроллерами. Это также работает на том же контроллере, что и в вашем случае.

var myApp = angular.module("myApp",[ "ui.router"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: '<p>{{ aValue }}</p><button ng-click="bindValue(\'its me\')">Bind value</button>',
        controller: "myController"
    }).state("state2", {
        url: "#",
        template: '<p>{{ aValue }}</p><button ng-click="bindValue(\'its me\')">Bind value</button>',
        controller: "myController"
    });
});


myApp.controller( "myController", function($scope, myFactory) {
    $scope.aValue = myFactory.myValue;

    $scope.bindValue = function (value) {
        $scope.aValue = value;
        myFactory.myValue = value;
    }
});


myApp.factory('myFactory', function () {
    return {
        myValue: ''
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<div ng-app="myApp">
    <nav>
        <a ui-sref="state1">State 1</a>
        <a ui-sref="state2">State 2</a>
    </nav>
    <div ui-view></div>
</div>

0
ответ дан lin 20 August 2018 в 10:37
поделиться
  • 1
    Но вопрос в том, должна ли эта бизнес-логика использовать один общий / родительский контроллер или два контроллера, которые связывают фабрику? – SoftTimur 19 February 2017 в 17:33
  • 2
    Зависит от ваших спецификаций приложений. Я бы использовал 2 контроллера и поместил все общие функции в завод, чтобы избежать избыточности. Таким образом, ваша логика, используемая в нескольких контроллерах, ограничена хорошей фабрикой, и ваши контроллеры все еще являются атомарными. – lin 19 February 2017 в 17:35
  • 3
    Я бы предпочел один общий контроллер, потому что я хочу, чтобы переключение между макетами было только об изменении шаблона, я не хочу, чтобы другие вещи (например, контроллер) менялись ... – SoftTimur 19 February 2017 в 17:37
  • 4
    Имеет смысл, поскольку я сказал, что это зависит от ваших спецификаций. Имейте в виду, в тот момент, когда вы вводите логику в свой контроллер, который используется только в одном макете - & gt; ваш аргумент устарел. Вы можете использовать этот пример для одного контроллера. Нужно ли создавать пример, в котором используется только один контроллер? – lin 19 February 2017 в 17:40
  • 5
    Да, я бы предпочел один контроллер + два шаблона, которые действительно могут совместно использовать переменные значения между ними ... – SoftTimur 19 February 2017 в 17:44

Я думаю, что вы должны использовать вложенные представления - вы можете определить главный контроллер в родительском состоянии маршрута и определить два вложенных состояния, соответствующих двум представлениям. Таким образом, родительский контроллер останется (он не будет повторно инициализирован при переключении дочерних состояний), и будут отображаться только виды вложенных состояний. Что-то вроде этого:

$stateProvider
  .state('myState', {
    url: '/test/',
    template: '<div ui-view></div>',
    controller: function() {
        //main controller shared by child states
        ...
    }
  })
  .state('myState.view1', {
    url: '/test/view1'
    templateUrl: 'tpl-1.hmtl',
    ...
  })
  .state('myState.view2', {
    url: '/test/view2'
    templateUrl: 'tpl-2.hmtl',
    ...
  })
0
ответ дан Bartek Fryzowicz 20 August 2018 в 10:37
поделиться
  • 1
    Не могли бы вы рассказать подробнее? Одна вещь, которую я хочу избежать (и я не знаю, как) состоит в том, чтобы определить два представления в одном шаблоне и HIDE по выбору макета. Мне не нравится идея HIDE . – SoftTimur 19 February 2017 в 17:40
  • 2
    @SoftTimur См. Ответы на обновления. – Bartek Fryzowicz 19 February 2017 в 19:21
Другие вопросы по тегам:

Похожие вопросы: