得到指令值在控制范围$ [英] Get value from directive to $scope in controller
本文介绍了得到指令值在控制范围$的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的指导，我已经从我的后端得到一些数据是这样的：
VAR monster_info = angular.element（本）.find（img目录）ATTR（题）。
$ http.get（LIB / terrain.php，{params：一个{monster_data：monster_info}}）成功（功能（数据）{。
的console.log（数据）;
}）;
我想这个数据出现在我的网站，所以我试图声明这样的变量在我的控制器：$ scope.fish = [];
然后我指定这样的数据值在我的指令：$ scope.fish =数据;
但没有什么是打印出来。如何控制和指令之间的沟通工作？我应该如何分享这样的数据？
下面是我的全部指令：
angular.module（'gameApp_directives'）。
指令（mapActivity'，函数（$ HTTP）{
返回{
限制：'A'，
链接：功能（范围，元素，ATTRS）{
范围。$表（资料表'，函数（）{ angular.element（'。点击＃1'）addClass（'虚线'）的HTML（$（＆下; IMG SRC =图像/ dot.png'＆gt;中））。。
变种J = NULL;
对于（VAR I = 1; I＆LT; = 4;我++）
{
$阿贾克斯（{
输入：GET，
网址：'LIB / terrain.php'，
数据类型：HTML，
数据：{I：I}，
成功：功能（数据）{
变种randomRuta = Math.floor（（的Math.random（）* 100）+ 1）;
angular.element（'＃点击+ randomRuta）.addClass（怪物）HTML（$（＆LT; IMG SRC =图像/ blackdot.png称号='+数据+'＆gt;中）） ;
}，
错误：功能（XHR，ajaxOptions，thrownError）{警报（thrownError）; }
}）;
J =;
}
angular.element（'点击'）。点击（函数（）{
如果（angular.element（本）.hasClass（怪物））
{
VAR monster_info = angular.element（本）.find（img目录）ATTR（题）。
$ http.get（LIB / terrain.php，{params：一个{monster_data：monster_info}}）成功（功能（数据）{。
的console.log（数据）;
}）; / *如果（确认（杜Vill的怪物anfalla？'））
{
警报（杜范恩）;
angular.element（'。click.monster+ J）.empty（）;
angular.element（'。click.monster'）removeClass移除（怪物+ J）。 angular.element（'click.dotted。'）空（）。
angular.element（'click.dotted。'）removeClass移除（'虚线'）;
angular.element（本）.addClass（'点'）;
。angular.element（'。click.dotted'）HTML（$（'＆LT; IMG SRC =图像/ dot.png＆GT;'））;
} * /
}
其他
{
angular.element（'click.dotted。'）空（）。
angular.element（'click.dotted。'）removeClass移除（'虚线'）; 如果（！angular.element（本）.hasClass（'点'））
{
angular.element（本）.addClass（'点'）;
angular.element（本）的.html（$（'＆LT; IMG SRC =图像/ dot.png＆GT;'））;
}
}
}）;
}）;
}
};
}）;
下面是我的控制器：
angular.module（'gameApp_controllers'）
.controller（'gameCtrl'，['$范围，$ HTTP，$位置，$ SCE，$ rootScope'，'链接'功能（$范围，$ HTTP，$位置$ SCE ，$ rootScope，链接）{ $ scope.resultLoaded = FALSE;
$ scope.getMonsters =1;
VAR资料表=; //变量用来保存HTML表格格局 $ http.post（LIB / action.php的，{怪物：$ scope.getMonsters}）。成功（功能（数据）{
//资料表=数据; //分配格局
$ scope.result = makeTableFrom（数据）; //调用函数基础上的图案建表
$ scope.resultLoaded =真;
}）错误（功能（数据）{执行console.log（错误）;}）; $ scope.fish = [];
$ scope.safeHtml =功能（）{
返回$ sce.trustAsHtml（$ scope.result）;
};
如果（link.user）{
/*$scope.message =菲斯克
的console.log（link.user）; * /
}其他{
/*$scope.message =Ledsen菲斯克
的console.log（AR INTE SATT）; * /
}
}]）。控制器（'firstPageCtrl'，['$范围，$ HTTP，$位置，$ SCE，$ rootScope'，'链接'功能（$范围，$ HTTP，$位置，SCE $，$ rootScope，链接）{
$ scope.doLogin =功能（）{
$ http.post（LIB / action.php的{用户名：$ scope.username，密码：$ scope.password}）。成功（功能（数据）{
如果（数据）{
link.user =数据;
的console.log（link.user）;
$ location.path（/游戏）;
}
}）错误（功能（数据）{
的console.log（数据）;
}）;
};
}]）;
任何人谁可以帮我吗？
下面是我的HTML
＆LT; DIV ID =layout_game＆GT;
＆LT; DIV NG控制器=gameCtrl＆GT;
＆LT; DIV NG-IF ='resultLoaded'ID =rightcontent_game＆GT;
＆LT;表NG绑定-HTML =safeHtml（）地图，活动＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;＆LT; DIV ID =leftcontent_game＆GT;
＆LT; DIV ID =leftcontent_top＆GT;
＆LT; UL＆GT;
＆LT;立GT;＆LT; A HREF =＃＆GT; Vildmarken＆LT; / A＆GT;＆LT; /李＆GT; ＆LT;立GT; | ＆LT; /李＆GT; ＆LT;立GT;＆LT; A HREF =＃＆GT; Marknaden＆LT; / A＆GT;＆LT; /李＆GT; ＆LT;立GT; | ＆LT; /李＆GT; ＆LT;立GT;＆LT; A HREF =＃＆GT;Värdshuset酒店＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
{{鱼}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
解决方案
我刚刚从这样的指令播出的事件：
$ rootScope $广播（'fishChange'，fishValue）。
然后在控制器侦听事件：
$范围。在$（'fishChange'，函数（事件，fishValue）{ //你想在这里什么}）;
In my Directive, I've getting some data from my backend like this:
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
});
I want this data to appear at my site, so I've tried to declare a variable like this in my controller: $scope.fish = [];
Then I just assign the data value like this in my directive: $scope.fish = data;
But nothing is printed out. How does the communication between controller and directive work? How should I share this kind of data?
Here is my whole directive:
angular.module('gameApp_directives').
directive('mapActivity', function($http) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch('tabledata', function() {
angular.element('.click#1').addClass('dotted').html($("<img src='images/dot.png'>"));
var j = null;
for(var i = 1; i <= 4; i++)
{
$.ajax({
type: 'GET',
url: 'lib/terrain.php',
dataType: 'html',
data: {i: i},
success: function(data) {
var randomRuta = Math.floor((Math.random() * 100) + 1);
angular.element('.click#'+randomRuta).addClass('monster').html($("<img src='images/blackdot.png' title='"+data+"'>"));
},
error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
});
j=i;
}
angular.element('.click').click(function() {
if(angular.element(this).hasClass('monster'))
{
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
});
/*if(confirm('Vill du anfalla monster?'))
{
alert("Du vann");
angular.element('.click.monster'+j).empty();
angular.element('.click.monster').removeClass('monster'+j);
angular.element('.click.dotted').empty();
angular.element('.click.dotted').removeClass('dotted');
angular.element(this).addClass('dotted');
angular.element('.click.dotted').html($('<img src="images/dot.png">'));
}*/
}
else
{
angular.element('.click.dotted').empty();
angular.element('.click.dotted').removeClass('dotted');
if(!angular.element(this).hasClass('dotted'))
{
angular.element(this).addClass('dotted');
angular.element(this).html($('<img src="images/dot.png">'));
}
}
});
});
}
};
});
Here is my controller:
angular.module('gameApp_controllers')
.controller('gameCtrl', ['$scope', '$http', '$location', '$sce', '$rootScope', 'link', function($scope, $http, $location, $sce, $rootScope, link) {
$scope.resultLoaded = false;
$scope.getMonsters = "1";
var tabledata = ""; //Variable to store pattern for html table
$http.post("lib/action.php", {monsters: $scope.getMonsters}).success(function(data) {
//tabledata = data; //Assign the pattern
$scope.result = makeTableFrom(data); //Call the function to build the table based on the pattern
$scope.resultLoaded = true;
}).error(function(data) { console.log("error"); });
$scope.fish = [];
$scope.safeHtml = function() {
return $sce.trustAsHtml($scope.result);
};
if(link.user) {
/*$scope.message = "fisk";
console.log(link.user);*/
} else {
/*$scope.message = "Ledsen fisk";
console.log("Är inte satt");*/
}
}]).controller('firstPageCtrl', ['$scope','$http','$location','$sce','$rootScope','link', function($scope, $http, $location, $sce, $rootScope, link) {
$scope.doLogin = function() {
$http.post("lib/action.php", {username: $scope.username, password: $scope.password}).success(function(data) {
if(data) {
link.user = data;
console.log(link.user);
$location.path("/game");
}
}).error(function(data) {
console.log(data);
});
};
}]);
Anyone who can help me?
Here is my HTML
<div id="layout_game">
<div ng-controller="gameCtrl">
<div ng-if='resultLoaded' id="rightcontent_game">
<table ng-bind-html="safeHtml()" map-Activity>
</table>
</div>
<div id="leftcontent_game">
<div id="leftcontent_top">
<ul>
<li><a href="#">Vildmarken</a></li> <li> | </li> <li><a href="#">Marknaden</a></li> <li> | </li> <li><a href="#">Värdshuset</a></li>
</ul>
</div>
{{fish}}
</div>
</div>
</div>
解决方案
I would just broadcast an event from the directive like this:
$rootScope.$broadcast('fishChange', fishValue);
And then in the controller listen for that event:
$scope.$on('fishChange', function(event, fishValue) {
// Do whatever you want here
});
这篇关于得到指令值在控制范围$的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
