Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
rybolmuk
0 / 0 / 0
Регистрация: 07.07.2015
Сообщений: 122
1

Область видимости директивы

09.07.2015, 17:43. Просмотров 1023. Ответов 3
Метки нет (Все метки)

Как в этой строке template: "<p ng-repeat='value in arr'>{{value}}</p>" правильно сослаться на массив arr из области видимости контролера.Если я напишу arr вместо value и удалю директиву ng-repeat, то массив отобразиться, но как сослаться на него именно в директиве ng-repeat и именно с таким scope: {} директивы???

<!DOCTYPE html>
<html ng-app="sportsStore" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ToDo List (Task2)</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
angular.module ("sportsStore", [])
.controller ("sportsStoreCtrl", function ($scope) {
$scope.arr=[47,555,11];
})
.directive('name', function () {
return {
restrict: 'A',
template: "<p ng-repeat='value in arr'>{{value}}</p>",
replace: true,
scope: {arr: "@mass"}
};
})



</script>
<style type="text/css">

body{
margin: 200px;
}
</style>
</head>
<body ng-controller="sportsStoreCtrl">
<div name mass="{{arr}}"></div>
</body>
</html>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.07.2015, 17:43
Ответы с готовыми решениями:

Область видимости при роутинге
Как передавать изменение &quot;переменной&quot; при роутинге в другую область странички? Вот есть такой код:...

Директивы
Всем привет! задача:кусок кода запихать в директиву и вызывать когда мне понадобиться в проекте !...

директивы
есть такой код .directive('myName', function () { return { my: 'blue', ...

Ui.router из директивы
Добрый день. в приложении создал конфиг: angular.module(&quot;LiamoApp&quot;, ) .config() Суть...

Директивы и кастомный темплате
Есть директива, которая должна получить обьект, взять с него id, и вписать его в путь к темплейту....

3
XRoy
862 / 712 / 305
Регистрация: 15.04.2013
Сообщений: 2,047
Записей в блоге: 5
09.07.2015, 18:44 2
Лучший ответ Сообщение было отмечено rybolmuk как решение

Решение

rybolmuk,
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html ng-app="sportsStore" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ToDo List (Task2)</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
var app = angular.module ("sportsStore", []);
  
app.controller ("sportsStoreCtrl", function ($scope) {
  $scope.arr=[47,555,11];
});
  
 
 
app.directive('name', function () {
  return {
    restrict: 'A',
    template: "<p ng-repeat='value in arr'>{{value}}</p>",
    scope: {
      arr: "=mass"
    }
  };
})
 
 
 
 
</script>
<style type="text/css">
 
body {
  margin: 200px;
}
</style>
</head>
<body ng-app="sportsStore" ng-controller="sportsStoreCtrl">
  <div name mass="arr"></div>
</body>
</html>
http://jsbin.com/zidodiriri/1/edit?html,output

И спользуйте ангуляр поновее, 1.0.6 устарел
0
rybolmuk
0 / 0 / 0
Регистрация: 07.07.2015
Сообщений: 122
10.07.2015, 00:01  [ТС] 3
Цитата Сообщение от XRoy Посмотреть сообщение
rybolmuk,
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html ng-app="sportsStore" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ToDo List (Task2)</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
var app = angular.module ("sportsStore", []);
  
app.controller ("sportsStoreCtrl", function ($scope) {
  $scope.arr=[47,555,11];
});
  
 
 
app.directive('name', function () {
  return {
    restrict: 'A',
    template: "<p ng-repeat='value in arr'>{{value}}</p>",
    scope: {
      arr: "=mass"
    }
  };
})
 
 
 
 
</script>
<style type="text/css">
 
body {
  margin: 200px;
}
</style>
</head>
<body ng-app="sportsStore" ng-controller="sportsStoreCtrl">
  <div name mass="arr"></div>
</body>
</html>
http://jsbin.com/zidodiriri/1/edit?html,output

И спользуйте ангуляр поновее, 1.0.6 устарел
1)Почему влияет replace: true??
2)И почему в этом случае scope: {arr: "@mass"} воспринимается строка?
3)И почему если сделать так <div name mass="{{arr}}"></div> выдает ошибку?
4)А при <div name mass="{{arr}}"></div> и {arr: "@mass"} воспринимается строка?
Как понять все эти особенности? Прослушал два видеокурса, прочитал один интернет ресурс и только начинаю что-то делать - появляется куча вопросов и нигде не могу найти ответ, только кроме в форумах добрые люди есть.в
0
XRoy
862 / 712 / 305
Регистрация: 15.04.2013
Сообщений: 2,047
Записей в блоге: 5
10.07.2015, 00:18 4
Лучший ответ Сообщение было отмечено rybolmuk как решение

Решение

1. Из-за replace у вас выходил бесконечный цикл, и вообще он уже deprecated
2. @ указывает что параметр - строка
3. При передаче параметра = не надо указывать двойные скобки {{}}
4. Из выше сказаного я думаю ответ ясен

Читайте документацию ангуляра, кроме того есть куча статей
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.07.2015, 00:18

Доступ к scope из директивы
Помогите разобраться. Есть контроллер. В него приходят данные, все хорошо. function...

Angular директивы и динамический DOM
Всем привет! Столкнулся с проблемой. В одном шаблоне со списком компаний у меня для каждой компании...

После append(strHTML) не срабатывают директивы ng-*
Добрый день знатоки!!! С помощью append в таблицу добавляю новую строку с кнопкой которая имеет...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru