Облицовочные вопросы с директивой в AngularJS

сталкиваются с проблемами с моей директивой, которую я создал. Кажется, что эта директива выполняется, я знаю это, поскольку вызывалась console.log(), и некоторые из шаблонов были показаны, однако часть, которая не отображалась, была с угловым выражением. Вот пример:Облицовочные вопросы с директивой в AngularJS

мой index.html:

<!DOCTYPE html> 
<html ng-app="appModule" ng-controller="controller"> 

<head> 
    <title>this is the title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
</head> 

<body> 
    <ul> 
     <li>{{section.item1}}</li> 
     <li>{{section.item2}}</li> 
     <li>{{section.item3}}</li> 
    </ul> 
    <div ng-repeat='product in section.products_section.list_products'> 
     <directive data='product'></directive> 
    </div> 
</body> 
<script src="angularjs/app.js"></script> 

</html>

мои app.js:

angular.module('appModule', []).controller('controller', ['$scope', function($scope) { 
    $scope.section = { 
     item1: 'this is item1', 
     item2: 'this is item2', 
     item3: 'this is item3', 
     products_section: { 

      list_products: [ 

        { 
         product_name: 'name 1' 

        }, { 
         product_name: 'name 2' 
        }, { 
         product_name: 'name 3' 
        } 

       ] //end of list_products 
     } 
    }; 
}]).directive('directive', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
      date: '=' 
     }, 
     templateUrl: 'angularjs/template.html', 
     replace: true, 
     controller: function($scope) { 
      console.log('this is controller in directive is called'); 
     } 

    }; 
}]);

мой шаблон HTML:

<ul> 
      <li>{{product.product_name}}</li> 
      <li>this-is-to-show-this-is-being-executed</li> 
</ul>

светлячок консоль: это контроллер в директиве называется

что это выглядит как в браузере:

this is item1 
this is item2 
this is item3 

this-is-to-show-this-is-being-executed 

this-is-to-show-this-is-being-executed 

this-is-to-show-this-is-being-executed

СОЖАЛЕНИЮ, Stackoverflow говорит, что мне нужно, по крайней мере 10 респ размещать изображения.

источник

2015-08-29 no_this_is_patrick

Я вижу пару вещей не так.

scope: { 
     date: '=' 
    }

Должно быть:

scope: { 
     data: '=' 
    },

И ваша ссылка на переменную области видимости в директиве должны быть данные. нет товар.

<ul> 
      <li>{{data.product_name}}</li> 
      <li>this-is-to-show-this-is-being-executed</li> 
</ul>

источник

2015-08-29 19:11:00 lostintranslation

ах, что фиксированный, спасибо –

Это работает.

app.js

angular.module('appModule', []) 
    .controller('controller', ['$scope', function($scope) { 
    $scope.section = { 
     item1: 'this is item1', 
     item2: 'this is item2', 
     item3: 'this is item3', 
     products_section: { 

     list_products: [ 

      { 
       product_name: 'name 1' 

      }, { 
       product_name: 'name 2' 
      }, { 
       product_name: 'name 3' 
      } 

      ] //end of list_products 
     } 
    }; 
    }]) 
    .directive('directive', [function(scope) { 
    return { 
     restrict: 'E', 
     templateUrl: 'template.html', 
     replace: true, 

    }; 
}]);

index.html

<!DOCTYPE html> 
<html ng-app="appModule" ng-controller="controller"> 

<head> 
    <title>this is the title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
</head> 

<body> 
    <ul> 
    <li>{{section.item1}}</li> 
    <li>{{section.item2}}</li> 
    <li>{{section.item3}}</li> 
    </ul> 

    <ul> 
    <li>{{section.products_section.list_products[0].product_name}}</li> 
    <li>{{section.item2}}</li> 
    <li>{{section.item3}}</li> 
    </ul> 

    <div ng-repeat='product in section.products_section.list_products'> 
    <directive></directive> 
    </div> 

    <script src="app.js"></script> 
</body> 

</html>

Plunkr

источник

2015-08-29 19:47:34 Drazisil

Облицовочные вопросы с директивой в AngularJS

ответ

Смежные вопросы