AngularJS - ng görünümü dışındaki erişim elemanları

Siparişleri görüntüleyebilmem için ng görünümü (yönetici paneli) içeren bir kurulum var. Benim json isteğimi değiştirmek için kullanmak istiyorum ng-view dışında bir arama kutusu var. Başlık gibi şeylere erişme konusunda bazı yayınlar gördüm, ancak bunları işe yaramadı - belki modası geçmiş.AngularJS - ng görünümü dışındaki erişim elemanları

Ana uygulama şeyler:

angular.module('myApp', ['myApp.controllers', 'myApp.filters', 'myApp.services', 'myApp.directives', 'ui.bootstrap']). 
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)  { 

$routeProvider. 
    when('/', { 
    templateUrl: '/partials/order/manage.html', 
    controller: 'ManageOrderCtrl' 
    }).  
    when('/order/:id', { 
    templateUrl: '/partials/order/view.html', 
    controller: 'ViewOrderCtrl' 
    }). 
    otherwise({ 
    redirectTo: '/' 
    }); 
$locationProvider.html5Mode(true); 
}]);

yönetme kontrolör:

angular.module('myApp.controllers', []) 
.controller('ManageOrderCtrl', ['$scope', '$http', '$dialog', 'config', 'Page', function($scope, $http, $dialog, config, Page) { 

    // would like to have search value from input #search available here 
    var getData = function() { 
    $http.get('/orders'). 
    success(function(data, status, headers, config) { 
     $scope.orders = data.orders; 
    }); 
    }; 

getData(); 
})

Görünüm:

<body ng-app="myApp" > 
    <input type="text" id="search"> 
    <div class="ng-cloak" > 
    <div ng-view></div> 
    </div> 
</body>

kaynak

2013-04-16 cyberwombat

u rootScope'u denediniz –

<div ng-view></div> dışındaki şeylere erişecekseniz, dış bölge için de bir denetleyici oluşturmak daha iyi bir yaklaşım olacaktır. - Daha sonra ng-view $ kapsamı MainCtrl $ kapsamının bir çocuğun yerine kardeş olacağını

<body ng-app="myApp" > 
    <div ng-controller="MainCtrl"> 
     <input type="text" id="search"> 
    </div> 
    <div class="ng-cloak" > 
    <div ng-view></div> 
    </div> 
</body>

(ng-controller="MainCtrl" da <body> etiketinde yerleştirilebilir: Sonra denetleyicileri arasında veri paylaşımı için bir hizmet oluşturmak .) hizmetini oluşturma

bu kadar basittir:

app.factory('Search',function(){ 
    return {text:''}; 
});

Ve böyle enjekte var:

app.controller('ManageOrderCtrl', function($scope,Search) { 
    $scope.searchFromService = Search; 
}); 

app.controller('MainCtrl',function($scope,Search){ 
    $scope.search = Search; 
});

Bu şekilde, global $ rootScope (javascript'teki genel değişkenlere dayanmak gibi - her türlü nedenden ötürü kötü bir fikir) ya da bir $ parent parenting aracılığıyla veri paylaşmaya güvenmeniz gerekmez. mevcut olmayabilir.

İki çözüm arasında bir plnkr that tries to show the difference oluşturdum.

kaynak

2013-04-16 07:10:28 joakimbl

Neredeyse var - benim sorun, arama kutusuna yazıp enter tuşuna basarsam, sadece uygulamaları yeniden yükler ve arama verilerini ajax getirisine alamaz. – cyberwombat

MainCtrl içinde bir işlevi çağıran formda gönderme - ManageOrderCtrl içinde yeniden yüklemeyi tetiklemek için bunu nasıl elde edeceğinizden emin değilim. – cyberwombat

Bu, orijinal soruda anlatılandan farklı bir soruna benziyor, ancak bir plnkr'da sorunu yeniden oluşturabilirseniz bunu bir – joakimbl

... Bu deneyin

Görünüm:

<body ng-app="myApp" > 
    <input type="text" id="search" ng-model="searchQuery" /> 
    <div class="ng-cloak" > 
    <div ng-view></div> 
    </div> 
</body>

kontrolörünüze bunu kullanma:

$http.get('/orders?query=' + $scope.searchQuery). 
    success(function(data, status, headers, config) { 
     $scope.orders = data.orders; 
});

Temel olarak, hiçbir şey İÇİ ng-app ile ... html etiketine ng-app taşıyın ve title olarak düzenleyebilir bunu yapabilir iyi!

kaynak

2013-04-16 06:33:03

Görünüm, denetleyiciye bağlıysa işe yaramıyor. Bu denetleyicinin kapsamına seachQuery eklenmeyecektir. –

kapsam hiyerarşilerini kullanabilirsiniz.

böyle HTML'nize bir "dış" ng-controller tanımını ekleyin:

<body ng-controller="MainCtrl">

O $ ebeveyn kapsamı haline gelecektir. Ancak verileri bir hizmet kullanarak paylaşmanız gerekmez. $scope.$parent kapsamını kullanmanıza bile gerek yoktur. scope hierarchies'u kullanabilirsiniz. (Bu sayfadaki Kapsam Hiyerarşileri bölümüne bakın). Bu gerçekten çok kolay.senin MainCtrl yılında

, bu olabilir:

$scope.userName = "Aziz";

Sonra MainCtrl içinde yuvalanmış (ve kendi kapsamında userName geçersiz kılmaz) da userName olacak herhangi denetleyicisi! {{UserName}} ile görünümde kullanabilirsiniz.

kaynak

2013-09-25 15:24:34 Jess

başlangıçta, ana denetleyicideki ng görünümünde giriş denetleyicisi ve giriş görünümü olduğunu varsayalım, ana denetleyiciyi veriden nasıl güncelleştirmeliyim giriş görünümünden mi geliyorsunuz? Ana kontrol cihazını da yeniden başlatmamız gerekiyor. –

Ana Denetleyici kapsamı iç içe bir kapsam içinde kullanılabilir. Kodda bir kesme noktası koyun ve $ kapsamına bakın. – Jess

AngularJS - ng görünümü dışındaki erişim elemanları

cevap

İlgili konular