-5

Let me try explaining things again. I have an app running in a javascript framework on Node.js w/ Bootstrap. In one of the bootstrap panels I embedded an Angular Elasticsearch search client. Here's some code that displays the results: 

<section class='results'><article class='result' ng-repeat='result in results track by $id(result)' /><div id="addThisInfo" ng-repeat='ng-repeat='result in results track by $id(result)' style="display: none;"> {{$id}},{{result.code}},{{result.expression}},{{result.source}}</div>Code:{{result.code}}<br>Description: {{result.expression}}<br>div ng-if='result.source ==4'> Type: Source 1</div><div ng-if='result.source ==10'> Type: Source 2</div></article> </section>

There are 5 results per page.

Note that the only portion of this app written in Angular is this search mechanism.

Ultimately I want the user to be able to click on either the text of the desired result or click on a button that would add their choices to a separate table.

Here's how it works rignt now. When I click on any of the 5 results per page it invokes this: 

document.addEventListener("click", function() {
  var packy = document.getElementById("addThisInfo").innerHTML; //div above
  addInfo(packy);
  });

It doesn't matter which ever one of the results I click, it always sends the "first" result of the active page. Even though the div "addThisInfo" has been repeated and is part of the result, it doesn't

The web socket call looks something like this: 

{"params":"0ij,I77.812ZZ,"Full Expression","100"}

I'm not having any luck uploading an image of the Inspect Element. But there you can see that all of the data is there.

I'd like to schedule a http://join.me session with someone so I could show you how it's currently working. Help is greatly appreciated!!

Thanks!

httpex
  • 1
  • 3
  • 2
    Angular *is* javascript. You need to give a lot more information about your problem, it doesn't make much sense as is. How do we know what `addInfo()` is, for instance. – Dylan Watt Jul 30 '15 at 21:15
  • Javascript should be friendlier to Javascript? Your question doesn't make much sense without substance. – David Barker Jul 30 '15 at 21:15
  • Yes, it's JS, but sharing the variables are tricky. I can declare a variable in JS and add it to my addInfo(var) very easily. I can't seem to get the Angular vars to be recognized in JS. – httpex Jul 30 '15 at 21:17
  • What do you mean by "Keep it JS"? Inline event handlers were frowned upon because you were forced to have functions at global scope, but AngularJS keeps those functions properly scoped. There is nothing wrong with using ng-click if you're already using the AngularJS framework. – yvesmancera Jul 30 '15 at 21:18
  • If Javascript is Javascript then how do I get result.source into addInfo()? – httpex Jul 30 '15 at 21:18
  • Angular isn't a language. Any "Angular vars" are JavaScript vars. You really need to provide more info on what it is exactly you tried, and what isn't working. – Claies Jul 30 '15 at 21:19
  • does `addInfo(result.source)` not work? – Claies Jul 30 '15 at 21:19
  • I'm basically using Angular for one search field with ElasticSearch only. The rest of the framework is Javascript. – httpex Jul 30 '15 at 21:20
  • again, ***angular IS JavaScript***. – Claies Jul 30 '15 at 21:21
  • When I try addInfo(result.source) it says result isn't defined. – httpex Jul 30 '15 at 21:22
  • Please, update your question with the JavaScript or HTML where you are trying to call this function. – Claies Jul 30 '15 at 21:22
  • Claies, so, based on what you're saying how should I add the vars to my function then? – httpex Jul 30 '15 at 21:24
  • add your vars to *which* function? you haven't shown any code. – Claies Jul 30 '15 at 21:24
  • Claies, this is the source. {{result.source}}, {{result.code}}, {{result.express}} all render on the page. The onclick looks like this: I have other variables that have were originally declared in JS that I can easily pass like this: addInfo(id,name); But I can't seem to get source, code or expression to pass in... – httpex Jul 30 '15 at 21:25
  • I really want to help; quite a few people have downvoted the question because you don't seem to be able to communicate what it is you are trying to do, and it's very hard to try to ask questions through comments. even in your latest comment, you haven't shown any HTML, you have simply shown 3 angular expressions with no context as to how these are defined in HTML, or how they relate to the function you are trying to call. – Claies Jul 30 '15 at 21:26
  • is the function part of your controller, defined on `$scope`, or defined in some other manner? is `result` an object on `$scope`? is it an iteration of ng-repeat? – Claies Jul 30 '15 at 21:29
  • Claies, you asked me if addInfo(result.source) worked. I told you that it responds that result is undefined. That itself explains my problem. It's not taking in variable like normal Javascript variables. – httpex Jul 30 '15 at 21:30
  • Yes. As I stated, I can render {{result.source}} perfectly on the page. – httpex Jul 30 '15 at 21:31
  • no, that doesn't explain your problem; it's not possible to know *why* `ng-click="addInfo(result.source)"` wouldn't work, without seeing the ***full*** HTML that is in play, or knowing where/how `addInfo()` is defined. – Claies Jul 30 '15 at 21:31
  • You really need to learn javascript – Deblaton Jean-Philippe Jul 30 '15 at 21:33
  • 1
    and saying "I can't use ng-click, because I need to keep it JavaScript" doesn't make any sense either. – Claies Jul 30 '15 at 21:33
  • All of the Angular expressions work perfectly on the page. I'm using output like this: Description: {{result.description}} and they render fine. But when I try to pass them through a Javascript onclick() function it's not recogizing them. – httpex Jul 30 '15 at 21:34
  • where is the `` defined? is it inside or outside the block of code where `ng-controller` is defined? – Claies Jul 30 '15 at 21:35
  • Deblaton, I have a pretty complex solution running on a javascript framwork. I simply embedded Angular to work with a single search field with ElasticSearch and now I'm running into this challenge. So dispense with the bull,. If it was so easy why don't I see you providing the fix? – httpex Jul 30 '15 at 21:37
  • at this point, all I can say is that until you can provide a Minimal, Complete, Verifiable Example, the question is unanswerable. See http://stackoverflow.com/help/mcve. I really want to help, but you don't seem to want to help us understand your problem. What you are describing isn't clear enough to continue. – Claies Jul 30 '15 at 21:39
  • and that comment "If it was so easy..." isn't helpful, because so far, you haven't described a situation that is common to angular, or a problem that makes sense. Provided a fix for *what*, exactly? passing some random variables to some random function? you aren't even **passing** any variables to the function in your sample at all. – Claies Jul 30 '15 at 21:41
  • The is defined inside. – httpex Jul 30 '15 at 21:46
  • Can you share more of your code get a better context. – Faktor 10 Jul 30 '15 at 21:56
  • adding angular on top of another app in the page just for one feature doesn't make sense either – charlietfl Jul 30 '15 at 22:03
  • Sure..putting it together – httpex Jul 30 '15 at 22:20
  • Charlietfil: What? Maybe not to you, but it totally works great. Just need to pass the data through... – httpex Jul 30 '15 at 22:22
  • Faktor, I'll do better than that. I'll share out my screen with you. – httpex Jul 30 '15 at 22:34

2 Answers2

0

why must you pass them individually? I'm unsure of what you're trying to accomplish, exactly, but I'd handle it something like this:

for the markup:

<button ng-click="addInfo(result)">

then in the controller

$scope.addInfo = function(result) {
    var foo = result.code,
        bar = result.source;

    etc...

}
Todd
  • 5,314
  • 3
  • 28
  • 45
  • I don't have to pass them individually, but I do need them to pass through onclick, not ng-click. – httpex Jul 30 '15 at 21:43
  • Let me ask the question like this; is it possible to invoke a "javascript onclick="addInfo()" function" from within an Angular app and pass Angular expressions through the function as parameters? – httpex Jul 31 '15 at 00:08
  • Yes but that's what ngclick does – richbai90 Jul 31 '15 at 02:05
  • [Another post](http://stackoverflow.com/questions/15424910/angularjs-access-scope-from-outside-js-function) about angular's $apply may lead you closer to an answer. I'm afraid I won't be of much further help until I understand why you must not use ng-click. you can use $apply to manipulate properties outside the context of their scope. – Todd Jul 31 '15 at 02:10
0
Angular. directive('notNgClick',  function () { return {
        restrict: 'A', 
        scope: {
            values: '&' 
        }, 
        link: function (scope,elem, attr) {
           elem.addEventListener(function ()  {alert (scope.values.someValue ) } ) 
        } 
    } 
}
richbai90
  • 4,994
  • 4
  • 50
  • 85