Issue with Isolated scopes in angular

问题

I am trying to run this program and I see no output. Can you please let me know what I am missing here. Thanks in advance.

<html>
<head ng-app="myApp">
<title>Test</title>

<link rel="stylesheet"   href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>

</head>
<body>
<div my-directive my-url="http://www.google.com" my-click="Click me">

</div>
</body>
<script>
angular.module('myApp',[]).directive('myDirective',function()
{
    return
    {
        restrict : 'AE',
        replace : true,
        scope :
        {
           myURL :'@',
           myClick : '@'
        },
        template : '<a href="{{myURL}}">{{myLinkText}}</a>'
    };
 });
</script>
</html>

回答1:

It looks like you placed the root of your Angular app in the header and not in the body. Change the location of the ng-app="myApp" attribute from the head to the body or html elements

<html ng-app="myApp"> <!-- new location -->
<head > <!-- ng-app="myApp" it was here -->
    <title>Test</title>

    <link rel="stylesheet"   href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>

</head>

In the directive {{myLinkText}} does not exists, it should be renamed for {{myClick}}

回答2:

some how by spending whole day i am able to display the text and able to click it but failing to redirect to the mentioned URL,i am getting error in console like Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=kepTWNDiIvLI8Afnp4HIBg' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.you can found the same here in console

来源：https://stackoverflow.com/questions/41176742/issue-with-isolated-scopes-in-angular

标签

angularjs

angularjs-directive

angularjs-scope