I have created a directive which draws a chart based on this post: http://briantford.com/blog/angular-d3.html?utm_source=javascriptweekly. The argument to the directive specifies a dataset to retrieve. When I have multiple directives in a page only the first chart is ever executed. Looking at the network traffic only the first dataset is retrieved.
<chart-directive datasetId="1"/>
<chart-directive datasetId="2"/>
I get no errors in the browser console. Its as if the second directive is never executed.
Any ideas?
Change your directive markup to
<chart-directive datasetId="1"></chart-directive>
<chart-directive datasetId="2"></chart-directive>
Why? Briefly, we can't have self-closing tags on our custom element directives
Source
Related
I have an external blazor component with 2 attributes like below. I am resolving through a function by passing the value of Href attribute.
<ComponentLink Href="bookings" Active=#GetCurrentLink("bookings")>
1my question is there any way to reference or bind the value of attribute value directly from another attribute without passing through a variable.
Basically something like
<ComponentLink Href="bookings" Active=#GetCurrentLink(#Href)>
I am asking this because it is within link list for a navigation and i dont want to create a fiel or property for each Href element. I can fix it on the ComponentLink source code possibly but I don't have source code access as it is in nuget package.
I have tried using #ref but It also doesnt help as intented.
There is no easy way to achieve this.
You can look at the component definition in the same way as the class constructors. You will have the same problem when you want to pass the same value there.
The best option, in this case, is to extract the text in the variable and reuse it.
You can also define your links in your C# code as an array and just enumerate the links to render the ComponentLink components dynamically.
Here is an example of this approach: https://blazorrepl.telerik.com/wmFYwAvG39LqBZFb06
The option with the #ref is not working, because the #ref value is populated once the component is rendered and typically, you will need to evaluate the Active value before that.
I'm pretty new to Razor Pages, and I'm trying to figure out how to replicate routing I have in my current Angular Page.
I have a base razor page that will be populated with different data depending on which parameter is passed to it. This is easy enough, and I know how to do this. However, my problem is in the routing because I want to be able to pass a readable parameter that is based off of the base URL. For example, I want to be able to do:
https://myURL/Band1
https://myURL/Band2
and have both point to the same page (but not the Index Page), consume the parameter "Band1" or "Band2" to display the associated information.
I understand how to consume the parameter, and how to get data, what I'm not clear on is how to do this routing based on the base URL. I can see how I'd do it if it were https://myURL/b/Band1 since I'd make a "b" page and accept parameters.
But how does one do this without that intervening segment of the URL? I need to be able to do this to not break existing links.
Thanks!
The docs for Razor Pages suggest you can create a page named Index.cshtml, which will act as the default where no page is specified in the URL.
Edit
If you want to preserve the parameterless index page, but have your page take its place when the additional URL part is provided, try the following in your page:
#page "/{bandName}"
I have a html page where I'm loading my directive
<kms-dir1></kms-dir1>
in that component 'kmsdir1.html' is loaded i.e templateUrl, I have defined everything and working fine, now I have a requirement to use one more directive (let's say kmsdir2) in that kmsdir1.html
In that kmsdir1 component I have specified directives and tried but it's not loading
So currently I have defined another directive also in parent page and using input and output params and making its visibility hidden and show.
Is there any alternative???? i.e to load a directive inside one more directive
FYI: I didn't see any error in console. Page itself is not getting loaded (Blank)
I would see two potential issues:
You don't define directives into the directives property of the component where you want to use them
The selectors you specify don't match any element in your component.
I was missing "#Injectable()" to the component which I wanted to use it as directive.. and my bad I was use *ng-If instead *ngIf :-p
I understood whenever page is getting completely blank and no error in console then there is error in your angular syntax.
I have a node script set up to scrape pages from an AngularJS application and then generate code needed for testing purposes. It works great except for one thing. ng-if. Since ng-if removes elements from the dom the script never sees these blocks of code. I can't remove the ng-if's. So I'm wondering if there is some way to intercept the html between when node-phantom requests the page and when it actually loads everything in to phantoms dom. What I'm hoping to do is simply set all the ng-if's to true so that all content is available. Does anyone have any ideas for this?
EDIT I'm using phantomjs-node not node-phantom.
My Final solution was to scrape the page for all of the comment tags. Then filter through to find the ones that contained ng-ifs and parse out variable names from those tags. Then I tapped into Angular's $scope and set all of the variables to true. Forcing everything that is hidden on the page to be visible.
My jsbin is here: http://jsbin.com/yapi/1/edit
I am testing the isolated scope within link method of the directive (it works when used within template instead).
My goal is that link method in different directives to be able to share and change same data (by reference, not by value). So that if a link method in one directive changes the data then it gets reflected in link method in other directives.
However, it does not seem to work as you can see in the jsbin link. e.g. if you change Dir 1 it does not change Dir 2 and vice versa.
i would use Angular's pub/sub pattern
Here is an article the talks about best practices
I would have a bunch of directives that interact with there own scope data,
when data changes in a directive it can $broadcast('message', data) a change to that data
other directives can listen $on('message', function(data){})
If you want everything to rely on the same data, then just use a service (singleton) that all the directive interact with