angularjs 两个 ng 控制器解决了 html 标记中的冲突

Question

这是我的： config.router.js

app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'JS_REQUIRES',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, jsRequires) {

    app.controller = $controllerProvider.register;
    app.directive = $compileProvider.directive;
    app.filter = $filterProvider.register;
    app.factory = $provide.factory;
    app.service = $provide.service;
    app.constant = $provide.constant;
    app.value = $provide.value;

    // LAZY MODULES

    $ocLazyLoadProvider.config({
        debug: false,
        events: true,
        modules: jsRequires.modules
    });

    // APPLICATION ROUTES
    // -----------------------------------

    $urlRouterProvider.otherwise('/login/signin');
    //
    // Set up the states
    $stateProvider.state('app', {
        url: "/app",
        templateUrl: "assets/views/app.html",
        resolve: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl'),
        abstract: true
    }).state('app.dashboard', {
        url: "/dashboard",
        templateUrl: "assets/views/dashboard.html",
        resolve: loadSequence('jquery-sparkline', 'dashboardCtrl'),
        title: 'Dashboard',
        ncyBreadcrumb: {
            label: 'Dashboard'
        }
    })
...

loginCtrl.js

app.controller('LoginCtrl', ["$scope", "alert", "auth", "$state", "$auth", "$timeout", function ($scope, alert, auth, $state, $auth, $timeout) {
    $scope.submit = function () {
        $auth.login({
            email: $scope.email,
            password: $scope.password
        })
            .then(function(res) {
                var message = 'Thanks for coming back ' + res.data.user.email + '!';
                if (!res.data.user.active)
                {$auth.logout();
                    message = 'Just a reminder, please activate your account soon :)';}
                alert('success', 'Welcome', message);
                return null;
            })
            .then(function() {
                $timeout(function() {
                    $state.go('main');
                });
            })

            .catch(handleError);
    } // submit function for login view
    function handleError(err) {
        alert('warning', 'oops there is a problem!', err.message);
    }
}]);

main.js

var app = angular.module('myApp', ['my-app']);
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {

    // Attach Fastclick for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers
    FastClick.attach(document.body);

    // Set some reference to access them from any scope
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    // GLOBAL APP SCOPE
    // set below basic information
    $rootScope.app = {
        name: 'My App', 
        author: 'example author', 
        description: 'My Platform', 
        version: '1.0', 
        year: ((new Date()).getFullYear()), 
        isMobile: (function () {
            var check = false;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                check = true;
            };
            return check;
        })()
    };
    $rootScope.user = {
        name: 'Peter',
        job: 'ng-Dev'

    };
}]);

问题是当我在 html 文件上将 ng-controller="loginCtrl" 添加到我的登录名 div 以进行登录时，它起作用了。但是我在登录 div:

下方还有另一个 div

<div class="copyright" >
    {{app.year}} &copy; {{ app.name }} by {{ app.author }}.
</div>

这行不通！但是，我在登录 div 上方有一个类似的，它有效：

<div class="logo">

    <img ng-src="{{app.layout.logo}}" alt="{{app.name}}"/>
</div>

问题出在哪里？如何解决？谢谢

Answer 1

如果您使用 angular ui-router，则无需手动将 ng-controller="loginCtrl" 添加到您的 DIV，而是将 controller 属性添加到您的 $stateProvider.state

示例：

.state('app.dashboard', {
        url: "/dashboard",
        templateUrl: "assets/views/dashboard.html",
        title: 'Dashboard',
        controller: 'dashboardCtrl',
        resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load('path/to/your/controller.js');
                    }]
                },
        ncyBreadcrumb: {
            label: 'Dashboard'
        }
    })

当您更改状态时，通常视图会更改为，这就是重点，对吗？即时设置控制器可能不会像您预期的那样工作。

结帐documentation

angularjs 两个 ng 控制器解决了 html 标记中的冲突

angularjs two ng controllers with resolve conflict in html markup

html

javascript

angularjs

ng-controller