These are chat archives for angular/angular.js

16th
Apr 2015
Louis Larry
@louislarry
Apr 16 2015 04:18
hello
how do I use $watch with angular new router?
I tried setting up $scope.$watch in the prototype.activate but it just not watching my variables
am I looking at the right place? looking for pointers so I can debug at the right places
Pravin
@codefullon
Apr 16 2015 05:02
hi all, have a browserify related question: lets say i made an angular/jquery app and use browserify to import cheerio for example, does that mean that instead of pinging my server to run through a particular website, the client who is on the website, their client(browser) will itself go and grab contents of another website using cheerio?
Louis Larry
@louislarry
Apr 16 2015 09:04
solved. I can use $watch with angular new router now.
my problem was not because of new router but by not using reference
instead of
$scope.$watch(myvar, function (new, old) { ... });
use following instead
$scope.$watch(function() { return myvar; }, function (new, old) { .... });
Dave Ackerman
@dmackerman
Apr 16 2015 12:20
@louislarry: $scope.$watch(() => myvar, (new, old) => { .... });
;)
afilp
@afilp
Apr 16 2015 13:57
Hello,
Are any ngmodules ported to angular v2?
Or none?
I know that v2 is in Alpha, but would like to create a project with it rather than v1
Tim Jacobi
@timjacobi
Apr 16 2015 15:03
Doesn't look like it. What are you particularly interested in?
Quinntyne Brown
@QuinntyneBrown
Apr 16 2015 16:01
Has anyone implemented named view-ports and a single view-port layout in a single app with the ngNewRouter?
I have an app with a single view port, but I like to go to a route with a master-detail. My shell is as follows https://github.com/QuinntyneBrown/ngToDo/blob/master/ngToDo/index.html
Louis Larry
@louislarry
Apr 16 2015 16:18
@dmackerman: thank's!
Mike Haas
@mikehaas763
Apr 16 2015 17:26
With the following filter usage, shouldn't I be getting note objects repeated that have a content property containing the text found in vm.searchText?
<div class="card" ng-repeat="note in vm.notes | filter : { content: vm.searchText } ">
Dave Ackerman
@dmackerman
Apr 16 2015 18:24
yes, do they have a content key?
Gaute Løken
@gautelo
Apr 16 2015 18:31
@mikehaas763 It appears the filterFilter will try to match the filter expression against any property on your note object, so no, it's not intended to work like you try to use it. See line 128 of https://github.com/angular/angular.js/blob/master/src/ng/filter/filter.js#L3. for implementation details or https://docs.angularjs.org/api/ng/filter/filter for usage. In short what you should do is either implement a predicate function on your scope and like that as your filter expression or implement a custom module.filter.
stefanmve
@stefanmve
Apr 16 2015 18:48
Hi, I am using a resource service to populate $scope.subscriptions, and that is working, but when I try to do get $scope.subscriptions.length, I am getting 0
Gaute Løken
@gautelo
Apr 16 2015 19:57
When adding a step to the ngNewRouter pipeline, is there an intended way to detect if the step is running for the source or destination?
Eloy Toro
@eloytoro
Apr 16 2015 20:40

Hello everyone, i'm having some issues with the $compile service, it seems that the scope passed to the compileAttachFn isnt the same used to render the view, causing inheritance issues.

$compile(element)(scope, function (clone, childScope) { /* childScope and clone are the same */ });

Why is this happening?

ng-model directives inside my element aren't binding to the correct scope because of this
Eloy Toro
@eloytoro
Apr 16 2015 21:13
update: the bug only occurs when the element has directives that transclude content, it seems that the scope inside transcluded content isnt the one passed on to the compile function, but a child scope derived from it
Gaute Løken
@gautelo
Apr 16 2015 21:15
@eloytoro The transcluded content should have the same scope as outside the directive. The idea is that your directive is a frame. Things on the frame has its own isolated scope (usually) and things that get transcluded in should be able to bind to outside things.
Eloy Toro
@eloytoro
Apr 16 2015 21:15
thats not the behaviour im getting
Gaute Løken
@gautelo
Apr 16 2015 21:16
It might be that the transclusion scope inherits the outside scope rather than being the outside scope. I'm not sure, but I think it's the latter.
Eloy Toro
@eloytoro
Apr 16 2015 21:16
it's funny, the $id differs from the one outside, so it's very clear they're two different scopes
i'll keep investigating this bug to pin point what exactly is going on
Gaute Løken
@gautelo
Apr 16 2015 21:17

This sort of thing should work.

<div ng-init="stuff = 5">
    <my-dir>
        <div>{{stuff}}</div>
    </my-dir>
</div>

If it isn't you're probably doing your transclusion wrong.

Hmm.. you should use the transclude function passed to your linking function instead of $compile, I think.
Eloy Toro
@eloytoro
Apr 16 2015 21:20
ok i've come up with an example that completely nails the issue
.directive('transcludeTest', function () {
  return {
    restrict: 'A',
    transclude: true,
    template: '<div ng-transclude></div>'
  };
});

.controller('TestCtrl', function ($document, $scope, $compile) {
  $compile('<div transclude-test><input ng-model="name"></div>')($scope, function (clone) {
    $document.append(clone);
    $scope.$watch('name', function (name) {
      console.log($scope.$name); // <- always logs undefined
      console.log(name) // <- shows the correct value
    });
  });
});
this makes no sense, why does transclusion behave so differently?
Gaute Løken
@gautelo
Apr 16 2015 21:26
Cause the transclude-test is not being linked inside the transclude function. Rather you compile it in the directives context/scope.
Eloy Toro
@eloytoro
Apr 16 2015 21:27
how would the correct code look? I dont know which directives are defined within the element
Gaute Løken
@gautelo
Apr 16 2015 21:32
Something like this should be pretty close:
.directive('transcludeTest', function ($log, $compile) {
  return {
    restrict: 'A',
    transclude: true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attrs, controllers, transclude) {
            transclude(function(clone, outerScope) {
                    element.append($compile('<div transclude-test><input ng-model="name"></div>')(outerScope));
                    $scope.$watch('name', function (name) {
                        $log.log(outerScope.$name);
                    });
            });
    }
  };
});
Amm.. made a small mistake.. sec
Eloy Toro
@eloytoro
Apr 16 2015 22:03
wouldnt that recursively add the directive forever?
Gaute Løken
@gautelo
Apr 16 2015 22:06
Ahh.. yes.. I didn't notice that the directive was called transcludeTest as well. Then I'm not sure I understand what you're trying to achieve. Your TestCtrl, did you intend that as a top-level controller and not as a directive controller? If so I don't see any transcluded content anywhere, so not sure what it has to do with anything :)
But yeah, building dom shouldn't happen in a controller. That's the sort of thing you do in directives (either in the compile- or link function).
Hmm.. maybe I'm taking my mouth too full with that last part. But I believe, at least in angular 1.x, there's some truth to that.
Eloy Toro
@eloytoro
Apr 16 2015 22:11
TestCtrl would a view controller
And yes, im trying to build the DOM within a controller (or service) because im implementing a high level directive that compiles views pulled from the server dynamically
Gaute Løken
@gautelo
Apr 16 2015 22:20
Ok. In that case, if I understand correctly you're trying to use the cloneAttachFn to get at the scope inside the transclude-test directive?
Eloy Toro
@eloytoro
Apr 16 2015 22:22
yes
Gaute Løken
@gautelo
Apr 16 2015 22:22
Firstly that function is deprecated. Secondly you shouldn't have to do any shenanigans to be able to get at the scope holding 'name'. That scope is the TestCtrl scope
Eloy Toro
@eloytoro
Apr 16 2015 22:22
it should be the same scope
Gaute Løken
@gautelo
Apr 16 2015 22:22
That's what I was on about with the transclusion scope being the outer scope.
Eloy Toro
@eloytoro
Apr 16 2015 22:23
well then why is the property undefined?
Gaute Løken
@gautelo
Apr 16 2015 22:24
I'm gonna give it another go:
.controller('TestCtrl', function ($document, $scope, $compile) {
  $scope.name = 'haba';
  var elem = $compile('<div transclude-test><input ng-model="name"></div>')($scope);
    $document.append(elem);
    $scope.$watch('name', function (name) {
        console.log($scope.$name); // <- always logs undefined
        console.log(name) // <- shows the correct value
    });
});
Cause you never initialized it I suppose? Either that or you might have just have gotten got by a gotcha, and should do $scope.model.name and bind ng-model="model.name"