Как вызвать событие изменения в области видимости контроллера? - PullRequest
Новая
       25

Как вызвать событие изменения в области видимости контроллера?

0 голосов
/ 20 мая 2019

Я столкнулся с проблемой при вызове события изменения в моем угловом приложении.У меня есть структура кода ниже: 

<div class="content-area" ng-app="management">

    <div class="project-table-wrapper" ng-controller="listCtrl">
        <!-- This is the list of the project -->
        <div class="">....</div>
        <a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
                <i class="fa fa-plus-circle"></i>
                Add Project
        </a>
    </div>
    <div ng-controller="addCtrl">
        <div class="search-box">
            <div class="search-input-wrap">
                <input placeholder="Search"
                       type="text"
                       id="searchInput" class="searchInput"
                       data-searchFor="newPro"
                       ng-model="suvery_search" ng-change="addCtrl.liveSearch(suvery_search)" >
                <i class="fa fa-search"></i>
            </div>
            <button class="btn-search searchIt" ng-click="addCtrl.liveSearch(suvery_search)" name="searchIt" value="Go"></button>
        </div>
    </div>
</div>

Контроллер Js: 

projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout, $modal) {
    $scope.liveSearch = function(suvery_search) {
        console.log(suvery_search);
    }
});

projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
    ...
});

Пока я запускаю событие изменения в событии поиска, функция liveSearch не вызывает вызов, записанный в addCtrl.Вместо этого, если я напишу ту же функцию в listCtrl, это будет нормально.

Я не понимаю, это поведение, кто-нибудь может помочь?

1 Ответ

1 голос
/ 20 мая 2019

Проблема связана с синтаксисом привязки события.Вы должны вызвать функцию контроллера из представления как ng-change="liveSearch(suvery_search)" и аналогично для события click. 

var projectApp = angular.module("management", []);

projectApp.controller('addCtrl', function ($scope, $window, $http, $timeout) {
    $scope.liveSearch = function(suvery_search) {
        console.log("addCtrl", suvery_search);
    }
});

projectApp.controller('listCtrl', function ($scope, $http, $window, $timeout) {
  $scope.liveSearch = function(suvery_search) {
        console.log("listCtrl", suvery_search);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="content-area" ng-app="management">

    <div class="project-table-wrapper" ng-controller="listCtrl">
        <!-- This is the list of the project -->
        <div class="">....</div>
        <a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
                <i class="fa fa-plus-circle"></i>
                Add Project
        </a>
        
        <div class="search-box">
            <div class="search-input-wrap">
                <input placeholder="Search"
                       type="text"
                       id="searchInput" class="searchInput"
                       data-searchFor="newPro"
                       ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
                <i class="fa fa-search"></i>
            </div>
            <button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
        </div>
    </div>
    <div ng-controller="addCtrl">
        <div class="search-box">
            <div class="search-input-wrap">
                <input placeholder="Search"
                       type="text"
                       id="searchInput" class="searchInput"
                       data-searchFor="newPro"
                       ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
                <i class="fa fa-search"></i>
            </div>
            <button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
        </div>
    </div>
</div>
...