Angural how to pass parameters (variable) to HTML

P

Pshevchenko2014-05-03 23:44:07

Angular

Pshevchenko, 2014-05-03 23:44:07

How to pass parameters to {{link}} from the showMe() function?
An example code of what I'm trying to do is below.
plnkr.co

<!DOCTYPE html>
<html data-ng-app="test">

  <head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body data-ng-controller="MyCtrl">
    <div>
      <button ng-click='showMe("http://rambler.ru/", "90%")'>Show</button>
    </div>
    <div data-ng-if="enabled">
      <div style='background-color: #c0c0c0; position: absolute;'>
        <button ng-click='removeDiv()'>Close</button>
        <iframe src='{{link}}'></iframe>
      </div>
    </div>
  </body>

</html>

!(function(ng) {
  'use strict';
  
  MyCtrl.$inject = ['$scope'];
  function MyCtrl($scope) {
    $scope.enabled = false;
    
    $scope.removeDiv = function(){
      
     $scope.enabled = false;
    }
    
    $scope.showMe = function(param, param2){
      $scope.link = param;
      $scope.enabled = true;
    }
  }
  
  ng.module('test', []).controller('MyCtrl', MyCtrl);
})(window.angular);

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

_

_ _, 2014-05-04
@Pshevchenko

plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

P

Pshevchenko, 2014-05-04
@Pshevchenko

Got the job done on Plunker using your example. Started migrating locally and nothing works. Changes are not passed.
What am I doing wrong?
app.js

'use strict';

angular.module('myApp', ['ngRoute'])
    .config(function ($routeProvider) {

    });

'use strict';

angular.module('myApp')
    .controller('MainCtrl', function ($scope) {


        $scope.enabled = false;

        $scope.close = function(){
            $scope.enabled = false;
        };

        $scope.showMe = function(param){
            $scope.movie = {src: param, title:"My Title"};
            $scope.enabled = true;
        };
    });

index.html

<body data-ng-controller="MainCtrl">
<!--main -->
 <div ng-view></div>
<div id="main">
            <div data-ng-if="enabled">
              <div style='background-color: #c0c0c0; position: absolute; width:90%; height:90%;'>
                <button ng-click='close()'>Close</button>
                <p>{{movie.title}}</p>

                <iframe type="text/html" ng-src="{{movie.src}}"></iframe>

              </div>
            </div>


<div class="row">
    <div class="container">
        <h3>DZK Modal TEST</h3>
        <button type="button" class="btn btn-danger" ng-click='showMe("/data")'>SHOW</button>
    </div>
</div>

</div>