Функция контроллера не вызывается из шаблона директивы в AngularJS

Question

Функция контроллера не вызывается из шаблона директивы в AngularJS

0

Шаблон директивы (items.html)

<li ng-repeat="item in itemCart">
    {{item.title}} <br>
    {{item.category}} &nbsp
    {{ formatCurrencyFunction({cost: item.price}) }}
</li>

Эта настраиваемая директива используется в Second.html

<h1>
    This is Second.
    {{header}}

</h1>
<hr>
<ul>  
  <items-list item-cart="items" format-currency-function="formatPrice(cost)"></items-list>
</ul>

Код для контроллера:

myApp.directive("itemsList", function(){
    return{
        templateUrl:"contents/Views/Directives/Items.html",
        replace: true,
        scope:{
            itemCart: "=",
            formatCurrencyFunction: "&"
        },
        restrict:"EACM" // E-Element A-Attribute C-Class M-Comments        
    }
})

myApp.controller('secondController', ['$scope', '$log', '$http','$routeParams', function($scope, $log, $http, $routeParams) {
     $scope.formatPrice = function(price){        
        return "₹ "+parseFloat(price).toFixed(2);
    };
    $scope.header = 'Second ' + ($routeParams.num || "");
    $scope.testSecond = "Second";
    $http.get("/items")
    .success(function(data){
        $scope.items = data;        
    });  

}]);

Функция formatPrice не вызывается из директивы Items.html

Что нужно исправить в моем коде, чтобы заставить его работать?

Navaneeth 27 март 2016, в 09:17

Источник

0

Любая причина, что функция formatPrice должна существовать в контроллере? Вы могли бы вместо этого перенести это в директиву?
Tah Tatsumoto 27 март 2016, в 06:42
0

Привет Тах Тацумото. Я учился тому, как заставить Приложение работать, передавая область действия от родителя Директиве ребенка. Да, это сработало бы так, как вы предлагаете использовать функцию ... но мне нужно понять, почему этот подход не работает.
Navaneeth 27 март 2016, в 06:47

Теги:

angularjs

angularjs-scope

angularjs-directive

4 ответа

Ещё вопросы

Любая причина, что функция formatPrice должна существовать в контроллере? Вы могли бы вместо этого перенести это в директиву?
Привет Тах Тацумото. Я учился тому, как заставить Приложение работать, передавая область действия от родителя Директиве ребенка. Да, это сработало бы так, как вы предлагаете использовать функцию ... но мне нужно понять, почему этот подход не работает.

rahul · Answer 1 · 2016-03-27T12-26-00.000Z

Функция контроллера 'formatCurrencyFunction()' не может быть вызвана, просто поместив ее в выражение.

Чтобы использовать функцию, которую нужно вызвать на основе четного, в вашем случае ng-init будет работать.

<li ng-repeat="item in itemCart" ng-init="formatCurrencyFunction({cost: item.price})">
{{item.title}} <br>
{{item.category}}
</li>

Navaneeth · Answer 2 · 2016-03-27T05-47-00.000Z

Получил эту работу, используя ng-repeat на странице Second.html вместо директивы.

Шаблон директивы (items.html)

<li>
    {{item.title}} <br>
    {{item.category}} &nbsp
    {{ formatCurrencyFunction({cost: item.price}) }}
</li>

Эта настраиваемая директива используется в Second.html

<h1>
    This is Second.
    {{header}}

</h1>
<hr>
<ul>  
  <items-list item="item" format-currency-function="formatPrice(cost)" ng-repeat="item in items"></items-list>
</ul>

Код в файле JS

myApp.directive("itemsList", function(){
    return{
        templateUrl:"contents/Views/Directives/Items.html",
        replace: true,
        scope:{
            item: "=",
            formatCurrencyFunction: "&"
        },
        restrict:"EACM" // E-Element A-Attribute C-Class M-Comments        
    }
})

Sujata Halwai · Answer 3 · 2016-03-27T05-25-00.000Z

Внутри функции директивной ссылки вам нужно вызвать метод, применив какое-то событие к этому атрибуту

Abdul Mannan · Answer 4 · 2016-03-27T04-28-00.000Z

Внутри функции директивной ссылки вы хотите вызвать метод следующим образом:

scope.someFn({arg: someValue});

myApp.directive("itemsList", function(){
return{
    templateUrl:"contents/Views/Directives/Items.html",
    replace: true,
    scope:{
        itemCart: "=",
        formatCurrencyFunction: "&formatCurrencyFunction"
    },
    link:function(scope, element, attrs){
        scope.formatPrice({arg: 35}); //scope.someFn({arg: 35});
    },
    restrict:"EACM" // E-Element A-Attribute C-Class M-Comments        
}

})