Zugriff auf eine Funktion in einem Controller in einer benutzerdefinierten Anweisung in angularjs definiert

Question

Ich bin ein Neuling für AngularJS. Ich folge dem Controller als Syntax bei der Definition von Methoden und Eigenschaften. Ich habe gerade eine benutzerdefinierte Anweisung erstellt, um die Suchergebnisse der Personen anzuzeigen. Ich habe eine Methode im Controller definiert, die in meinem benutzerdefinierten Direktiven-Suchergebnis verwendet wird. Wie kann ich auf die Funktion "formatAddress" in meiner benutzerdefinierten Direktive zugreifen, die den Controller als Syntax verwendet?

app.js

var myApp = angular.module('myApp', ['ngRoute']); 

myApp.config(function($routeProvider) { 

    $routeProvider 
    .when('/', { 
     templateUrl: 'pages/main.html', 
     controller: 'mainController', 
     controllerAs: 'main' 
    }) 

    .when('/second', { 
    templateUrl: 'pages/second.html', 
    controller: 'secondController', 
    controllerAs: 'second' 
    }) 

    .when('/second/:num', { 
    templateUrl: 'pages/second.html', 
    controller: 'secondController', 
    controllerAs: 'second' 
    }) 

}); 

myApp.controller('mainController', ['$scope', '$log', 
    function($scope, $log) { 

    var self = this; 

    self.people = [{ 
     name: 'John Doe', 
     address: '555 Main St.', 
     city: 'New York', 
     state: 'NY', 
     zip: '11111' 
    }, { 
     name: 'Jane Doe', 
     address: '333 Second St.', 
     city: 'Buffalo', 
     state: 'NY', 
     zip: '22222' 
    }, { 
     name: 'George Doe', 
     address: '111 Third St.', 
     city: 'Miami', 
     state: 'FL', 
     zip: '33333' 
    }]; 

    self.formattedAddress = function(person) { 

     return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip; 

    }; 

    } 
]); 

myApp.controller('secondController', ['$scope', '$log', '$routeParams', 
    function($scope, $log, $routeParams) { 



    } 
]); 

myApp.directive("searchResult", function() { 
    return { 
    restrict: 'EA', 
    templateUrl: 'directives/searchresult.html', 
    replace: true, 
    scope: { 
     personObject: "=", 
     formattedAddressFunction: "&" 
    } 
    } 
}); 

ich nicht in der Lage bin zugreifen Person Objekt innerhalb formattedAddress zuzugreifen.

main.html

<label>Search</label> 
<input type="text" value="Doe" /> 

<h3>Search Results</h3> 
<div class="list-group"> 
    <search-result person-object="main.person" formatted-address-function="main.formattedAddress(aperson)" ng-repeat="person in main.people"></search-result> 
</div> 

searchresult.html

<a href="#" class="list-group-item"> 
    <h4 class="list-group-item-heading">{{ personObject.name }}</h4> 
    <p class="list-group-item-text"> 
    {{ formattedAddressFunction({ aperson: personObject }) }} 
    </p> 
</a> 

Answer 1

Verwendung ng-Controller-Richtlinie des Controller entfernt diese Verweise auf Haupt verweisen:

<label>Search</label> 
<input type="text" value="Doe" /> 

<h3>Search Results</h3> 
<div class="list-group" ng-controller="mainController"> 
    <search-result person-object="person" formatted-address-function="formattedAddress(aperson)" ng-repeat="person in people"></search-result> 
</div> 

Satz formattedAddress und Person Umfang in Ihrem Controller wie folgt $:

$scope.formattedAddress = function(person) { 
    return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip; 
}; 

Answer 2

Sie Winkel Filter für diese Verwendung werden sollte. Ein Beispielfilter zum Begrenzen der Buchstaben eines Wortes.